/** JakToMám — Map Self CSS. Extracted from result_map_self.php. */

  .ms-wrap  { max-width: 860px; margin: 2rem auto; padding: 0 1rem 4rem; }
  .ms-back  { display:inline-block; margin-bottom:1rem; font-size:.83rem; color:var(--color-accent); text-decoration:none; }
  .ms-back:hover { text-decoration:underline; }
  .ms-h1    { font-size:1.15rem; font-weight:700; color:var(--color-nav); margin-bottom:.35rem; }
  .ms-intro { font-size:.88rem; color:#888; line-height:1.65; margin-bottom:1.4rem; max-width:620px; }

  /* ── Metrika: Index vědomí ─────────────────────────────────────────── */
  .ms-awareness {
    background:var(--color-surface); border-radius: 0; padding:1.4rem 2rem;
    box-shadow:var(--shadow-md); margin-bottom:1rem;
    display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem;
  }
  .ms-aw-main { flex:0 0 auto; }
  .ms-aw-val  { font-size:3rem; font-weight:800; line-height:1; }
  .ms-aw-label{ font-size:.75rem; font-weight:700; text-transform:uppercase;
                letter-spacing:.07em; color:var(--color-text-4); margin-top:.25rem; }
  .ms-aw-desc { flex:1; min-width:220px; font-size:.84rem; color:var(--color-text-3); line-height:1.65; }
  .ms-aw-bar-wrap { width:100%; background:#eee; border-radius: 0; height:8px; margin-top:.5rem; }
  .ms-aw-bar { height:8px; border-radius: 0; }

  /* ── Metrické karty ────────────────────────────────────────────────── */
  .ms-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
              gap:.75rem; margin-bottom:1rem; }
  .ms-card  { background:var(--color-surface); border-radius: 0; padding:1rem 1.2rem;
              box-shadow:0 2px 6px rgba(0,0,0,.07); }
  .ms-card-title { font-size:.72rem; color:#999; font-weight:600; text-transform:uppercase;
                   letter-spacing:.06em; margin-bottom:.3rem; }
  .ms-card-val   { font-size:1.6rem; font-weight:800; }
  .ms-card-sub   { font-size:.73rem; color:var(--color-text-4); margin-top:.1rem; line-height:1.45; }

  /* ── Admin výklad vědomé mapy ──────────────────────────────────────── */
  .ms-pmnote { background:var(--color-surface); border-radius: 0; padding:1.2rem 1.5rem;
               box-shadow:0 2px 6px rgba(0,0,0,.07); margin-bottom:1rem; }
  .ms-pmnote h2 { font-size:.88rem; font-weight:700; color:#444; margin-bottom:.6rem; }
  .ms-pmnote-text { font-size:.9rem; color:#312e81; line-height:1.7; white-space:pre-wrap; }
  .ms-pmnote-form { display:flex; flex-direction:column; gap:.4rem; }
  .ms-pmnote-ta { width:100%; box-sizing:border-box; border:1px solid #c7d2fe;
                  border-radius: 0; padding:.45rem .6rem; font-size:.88rem;
                  resize:vertical; min-height:6rem; background:var(--color-surface); font-family:inherit; }
  .ms-pmnote-btn { align-self:flex-start; padding:.32rem .9rem; background:var(--color-affinity);
                   color:#fff; border:none; border-radius: 0; cursor:pointer; font-size:.82rem; }
  .ms-pmnote-hint { font-size:.74rem; color:var(--color-text-4); }

  /* ── Morph / Animace ───────────────────────────────────────────────── */
  .ms-morph { background:var(--color-surface); border-radius: 0; padding:1.4rem 2rem;
              box-shadow:var(--shadow-md); margin-bottom:1rem; }
  .ms-morph h2 { font-size:.88rem; font-weight:700; color:#444; margin-bottom:.3rem; }
  .ms-morph-desc { font-size:.81rem; color:#888; margin:0 0 1rem; line-height:1.6; }
  .ms-svg-wrap { background:#f4f4f8; border-radius: 0; overflow:hidden; }
  #ms-morph-svg { width:100%; height:100%; display:block; }
  .ms-controls { display:flex; align-items:center; gap:.5rem 1rem; margin-top:.75rem; flex-wrap:wrap; }
  .ms-lbl      { font-size:.77rem; color:#888; white-space:nowrap; font-style:italic; }
  .ms-lbl-l    { min-width:90px; text-align:right; }
  .ms-lbl-r    { min-width:90px; }
  #ms-slider   { flex:1; min-width:120px; accent-color:#7c5cbf; cursor:pointer; }
  .ms-play     { padding:.32rem .85rem; border:1.5px solid #7c5cbf; border-radius: 0;
                 background:#faf9ff; color:#7c5cbf; font-size:.8rem; font-weight:700;
                 cursor:pointer; font-family:inherit; white-space:nowrap; }
  .ms-play:hover { background:#f0eeff; }
  .ms-t-lbl    { font-size:.8rem; font-weight:700; color:#7c5cbf; min-width:34px; text-align:center; }
  .ms-opts     { display:flex; align-items:center; gap:1rem; margin-top:.5rem;
                 font-size:.78rem; color:#777; }
  .ms-opts label { display:flex; align-items:center; gap:.3rem; cursor:pointer; }

  /* ── Heatmap ─────────────────────────────────────────────────────── */
  .ms-heat       { margin-top:1.1rem; }
  .ms-heat-title { font-size:.75rem; font-weight:700; color:#bbb; text-transform:uppercase;
                   letter-spacing:.06em; margin-bottom:.5rem; }
  .ms-heat-row   { display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
  .ms-heat-lbl   { font-size:.8rem; color:#444; min-width:110px; overflow:hidden;
                   text-overflow:ellipsis; white-space:nowrap; }
  .ms-heat-track { flex:1; height:5px; background:#f0f0f0; border-radius: 0; overflow:hidden; }
  .ms-heat-fill  { height:5px; border-radius: 0; display:block; }
  .ms-heat-pct   { font-size:.72rem; min-width:32px; text-align:right; }

  /* ── Self concept sekce ─────────────────────────────────────────── */
  .ms-self { background:var(--color-surface); border-radius: 0; padding:1.2rem 1.5rem;
             box-shadow:0 2px 6px rgba(0,0,0,.07); margin-bottom:1rem; }
  .ms-self h2 { font-size:.88rem; font-weight:700; color:#444; margin-bottom:.75rem; }
  .ms-self-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
  .ms-self-item { background:var(--color-surface-2); border-radius: 0; padding:.7rem 1rem; }
  .ms-self-item .lbl { font-size:.72rem; color:#999; text-transform:uppercase; letter-spacing:.05em; }
  .ms-self-item .val { font-size:1rem; font-weight:700; margin-top:.2rem; color:var(--color-nav); }
  .ms-self-item .sub { font-size:.72rem; color:var(--color-text-4); margin-top:.1rem; }

  /* ── Top shifts / stable tabulky ───────────────────────────────── */
  .ms-table-wrap { background:var(--color-surface); border-radius: 0; padding:1.2rem 1.5rem;
                   box-shadow:0 2px 6px rgba(0,0,0,.07); margin-bottom:1rem; }
  .ms-table-wrap h2 { font-size:.88rem; font-weight:700; color:#444; margin-bottom:.6rem; }
  .ms-table-desc    { font-size:.82rem; color:#888; margin-bottom:.75rem; line-height:1.55; }
  table.ms-tbl { width:100%; border-collapse:collapse; font-size:.83rem; }
  table.ms-tbl th { background:#f5f5f8; font-weight:600; padding:.4rem .7rem;
                    border-bottom:1px solid #e8e8ee; text-align:left; }
  table.ms-tbl td { padding:.38rem .7rem; border-bottom:1px solid #f0f0f0; }
  table.ms-tbl tr:last-child td { border-bottom:none; }
  .ms-score-bar { display:inline-block; height:5px; border-radius: 0; vertical-align:middle;
                  margin-right:.4rem; }
  .ms-tag-self { display:inline-block; font-size:.65rem; background:var(--color-self); color:#92400e;
                 border-radius: 0; padding:.05rem .3rem; margin-left:.3rem; font-weight:700; }
  .ms-tag-pos  { display:inline-block; font-size:.65rem; background:var(--color-success-bg); color:#065f46;
                 border-radius: 0; padding:.05rem .3rem; margin-left:.3rem; }
  .ms-tag-neg  { display:inline-block; font-size:.65rem; background:#fee2e2; color:var(--color-error);
                 border-radius: 0; padding:.05rem .3rem; margin-left:.3rem; }
  .ms-tag-nopm { display:inline-block; font-size:.65rem; background:#f3f4f6; color:var(--color-text-4);
                 border-radius: 0; padding:.05rem .3rem; margin-left:.3rem; }

  /* ── Dvojice / trojice ──────────────────────────────────────────── */
  .ms-pair-row { display:flex; align-items:baseline; gap:.45rem; padding:.32rem .7rem;
                 border-bottom:1px solid #f0f0f0; font-size:.82rem; }
  .ms-pair-row:last-child { border-bottom:none; }
  .ms-pair-names { flex:1; color:var(--color-nav); }
  .ms-pair-sep   { color:#c4b5fd; font-weight:300; }
  .ms-pair-delta { font-weight:700; min-width:38px; text-align:right; }
  .ms-pair-dir   { font-size:.72rem; padding:.05rem .4rem; border-radius: 0; white-space:nowrap; }
  .ms-pair-dir.closer  { background:var(--color-success-bg); color:#065f46; }
  .ms-pair-dir.farther { background:#fee2e2; color:var(--color-error); }
  .ms-pair-bar { height:5px; border-radius: 0; display:inline-block; vertical-align:middle; margin-left:.3rem; }

  /* ── Awarenss color helpers ─────────────────────────────────────── */
  .aw-hi  { color:#065f46; } .aw-hi  .ms-aw-bar { background:#059669; }
  .aw-mid { color:#92400e; } .aw-mid .ms-aw-bar { background:var(--color-warning); }
  .aw-lo  { color:var(--color-error); } .aw-lo  .ms-aw-bar { background:#dc2626; }

  /* ── SVG outer + left panel ──────────────────────────────────────── */
  .ms-svg-outer {
    --size: min(calc(100vw - 2rem), calc(100dvh - 160px), 600px);
    width:var(--size); height:var(--size);
    position:relative; border-radius: 0; overflow:hidden; background:#f4f4f8;
  }
  #ms-morph-svg { width:100%; height:100%; display:block; }
  .ms-svg-wrap  { background:transparent; border-radius:0; }

  .ms-lpanel { position:absolute; top:0; left:0; bottom:0; width:210px;
    background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
    border-right:1px solid var(--color-border); display:flex; flex-direction:column;
    transform:translateX(-210px); transition:transform .22s ease; z-index:10; }
  .ms-lpanel.open { transform:translateX(0); }
  .ms-lpanel-toggle { position:absolute; top:8px; left:0; z-index:11;
    background:rgba(255,255,255,.9); border:1px solid var(--color-border); border-left:none;
    border-radius: 0; padding:.3rem .38rem; font-size:.72rem;
    cursor:pointer; color:#555; transition:left .22s ease;
    writing-mode:vertical-rl; letter-spacing:.04em; white-space:nowrap; }
  .ms-lpanel-toggle:hover { background:#f0f0f0; }
  .ms-lpanel.open ~ .ms-lpanel-toggle { left:210px; }
  .ms-lpanel-tabs { display:flex; border-bottom:1px solid var(--color-border); flex-shrink:0; }
  .ms-ltab { flex:1; padding:.38rem; border:none; background:none; cursor:pointer;
    font-size:.73rem; font-weight:600; color:var(--color-text-4);
    border-bottom:2px solid transparent; transition:color .15s,border-color .15s; }
  .ms-ltab.active { color:var(--color-affinity); border-bottom-color:var(--color-affinity); }
  .ms-lpanel-body { flex:1; overflow-y:auto; padding:.35rem; display:none; }
  .ms-lpanel-body.active { display:block; }

  .ms-lp-item { display:flex; align-items:center; gap:.35rem; padding:.26rem .35rem;
    border-radius: 0; cursor:pointer; margin-bottom:.08rem; }
  .ms-lp-item:hover { background:#f3f4f6; }
  .ms-lp-item.hl    { background:#eef2ff; }
  .ms-lp-dot   { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .ms-lp-lbl   { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.77rem; }
  .ms-lp-delta { font-size:.7rem; color:var(--color-text-4); flex-shrink:0; }
  .ms-lp-section { font-size:.67rem; font-weight:700; color:#bbb;
    text-transform:uppercase; letter-spacing:.06em; margin:.55rem 0 .28rem .35rem; }
  .ms-lp-rel { padding:.28rem .35rem; border-radius: 0; cursor:pointer;
    margin-bottom:.15rem; border:1px solid #f0f0f0; }
  .ms-lp-rel:hover   { background:#f3f4f6; border-color:#c7d2fe; }
  .ms-lp-rel.hl      { background:#eef2ff; border-color:#c7d2fe; }
  .ms-lp-rel-names   { font-size:.76rem; color:#312e81; line-height:1.4; }
  .ms-lp-rel-delta   { font-size:.67rem; color:#059669; margin-top:.1rem; }

  /* ── Retractable controls ─────────────────────────────────────────── */
  .ms-ctrl-toggle { display:flex; justify-content:center; margin:.35rem 0 0;
    border:none; background:none; cursor:pointer; font-size:.73rem; color:#bbb;
    width:100%; padding:.1rem; }
  .ms-ctrl-toggle:hover { color:#888; }
  .ms-bottom-area { overflow:hidden; transition:max-height .25s ease; max-height:200px; }
  .ms-bottom-area.ms-hidden { max-height:0; }

  /* ── Drag cursor ──────────────────────────────────────────────────── */
  #ms-morph-svg { touch-action:none; }

  /* ── Fullscreen ───────────────────────────────────────────────────── */
  #ms-morph-card:fullscreen { background:#f0f0f6; padding:1rem;
    display:flex; flex-direction:column; overflow:auto; }
  #ms-morph-card:fullscreen .ms-svg-outer { --size:min(calc(100vw - 2rem), calc(100vh - 120px)); width:var(--size); height:var(--size); }
  #ms-morph-card:fullscreen #ms-morph-svg { width:100%; height:100%; }