/* =====================================================
   lib/local-ai-example.css
   Local AI Framework — 頁面樣式
   ===================================================== */

/* ── Layer Matrix base ── */
.lm-wrap { margin: 12px 0 20px 0; font-size: 0.86rem; }
.lm-row  { display: flex; align-items: stretch; border: 1px solid #d0d7de; border-bottom: none; }
.lm-row:last-child { border-bottom: 1px solid #d0d7de; }
.lm-left { flex: 0 0 160px; padding: 12px 14px; display: flex; flex-direction: column;
           justify-content: center; border-right: 1px solid #d0d7de; }
.lm-num  { font-size: 0.72rem; font-weight: 700; letter-spacing: .04em;
           text-transform: uppercase; opacity: .65; margin-bottom: 4px; }
.lm-name { font-size: 0.95rem; font-weight: 700; margin-bottom: 2px; }
.lm-desc { font-size: 0.75rem; }
.lm-right { flex: 1; padding: 12px 16px; display: flex; flex-wrap: wrap;
            align-items: center; gap: 6px; background: #f6f8fa; }
.lm-chip  { background: #fff; border: 1px solid #d0d7de; border-radius: 4px;
            padding: 2px 9px; font-size: 0.78rem; white-space: nowrap; }
.lm-conn  { padding: 0 0 0 72px; font-size: 1.1rem; color: #8b949e; line-height: 1.4; }

/* ── Flow elements ── */
.lm-flow  { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.lm-node  { background: #fff; border: 1px solid #d0d7de; border-radius: 4px;
            padding: 3px 9px; font-size: 0.78rem; white-space: nowrap; }
.lm-node.hl  { border-color: #4caf82; color: #1e5f74; font-weight: 600; }
.lm-node.sec { border-color: #e05252; background: #fff5f5; color: #b91c1c; }
.lm-node.mem { border-color: #4caf82; background: #f0fff4; color: #1e5f74; }
.lm-node.obs { border-color: #e36209; background: #fff8f3; color: #b45309; }
.lm-arr   { color: #8b949e; font-size: 0.95rem; flex-shrink: 0; }
.lm-branch { display: flex; flex-direction: column; gap: 4px; }
.lm-branch-row { display: flex; align-items: center; gap: 5px; }
.lm-badge { font-size: 0.68rem; padding: 1px 6px; border-radius: 3px; font-weight: 600;
            white-space: nowrap; }
.lm-badge.hi { background: #fff3e0; color: #e36209; border: 1px solid #e36209; }
.lm-badge.lo { background: #e6f4f1; color: #10a37f; border: 1px solid #10a37f; }
.lm-note  { font-size: 0.72rem; color: #8b949e; font-style: italic; }
.lm-par   { font-size: 0.72rem; color: #4a90e2; font-weight: 700; padding: 1px 5px;
            border: 1px solid #4a90e2; border-radius: 3px; }
.obs-bar  { margin: 4px 0 0 0; padding: 6px 12px; background: #fff8f3;
            border: 1px dashed #e36209; border-radius: 4px;
            font-size: 0.78rem; color: #b45309; width: 100%; box-sizing: border-box; }

/* ── Layer 色帶 ── */
.l5  .lm-left { background: #7d2d00; color: #fff; } .l5  .lm-desc { color: #ffc499; }
.l4  .lm-left { background: #1a3a5c; color: #fff; } .l4  .lm-desc { color: #9ecae1; }
.l35 .lm-left { background: #2d4a3e; color: #fff; } .l35 .lm-desc { color: #9ddfc5; }
.l3  .lm-left { background: #1e5f74; color: #fff; } .l3  .lm-desc { color: #9dcfdd; }
.l2  .lm-left { background: #5c3d99; color: #fff; } .l2  .lm-desc { color: #d4bef7; }
.l1  .lm-left { background: #374151; color: #fff; } .l1  .lm-desc { color: #b0b8c1; }
.m4  .lm-left { background: #1e3a1e; color: #fff; } .m4  .lm-desc { color: #a3d9a5; }
.m3  .lm-left { background: #1a3a5c; color: #fff; } .m3  .lm-desc { color: #9ecae1; }
.m2  .lm-left { background: #5c3d99; color: #fff; } .m2  .lm-desc { color: #d4bef7; }
.m1  .lm-left { background: #374151; color: #fff; } .m1  .lm-desc { color: #b0b8c1; }

/* ── Review table ── */
.rv-table { border-collapse: collapse; width: 100%; font-size: 0.84rem; margin: 12px 0; }
.rv-table th, .rv-table td { border: 1px solid #d0d7de; padding: 8px 12px;
                              vertical-align: top; text-align: left; }
.rv-table thead tr { background: #f0f6ff; }
.rv-table thead th { font-weight: 700; color: #1a3a5c; }
.rv-table tbody tr:hover td { background: #f6f8fa; }
.rv-table tbody tr:nth-child(even) td { background: #fafbfc; }
.rv-issue-en { font-weight: 700; color: #1a3a5c; display: block; }
.rv-issue-zh { font-size: 0.75rem; color: #8b949e; }
.rv-key { background: #f1f3f5; border-radius: 3px; padding: 0 5px;
          font-family: monospace; font-size: 0.8rem; color: #24292e; white-space: nowrap; }

/* ── Collapsible ── */
.ex-summary { cursor: pointer; font-size: 1.05rem; font-weight: 700;
              padding: 10px 14px; background: #f6f8fa; border: 1px solid #d0d7de;
              border-radius: 6px; list-style: none; user-select: none; }
.ex-summary::-webkit-details-marker { display: none; }
.ex-summary::before { content: "▶ "; font-size: 0.8rem; color: #8b949e; }
details[open] .ex-summary::before { content: "▼ "; }
details { margin: 16px 0; }
details[open] { border: 1px solid #d0d7de; border-radius: 6px; }
details[open] .ex-summary { border-radius: 6px 6px 0 0; border-bottom: 1px solid #d0d7de; }
.ex-body { padding: 16px; }

/* ── RWD ── */
@media (max-width: 540px) { .lm-left { flex: 0 0 110px; } }