/* Shared expand panel — apple-stock 風スタイル
   Used by both /matrix/iphone and /apple-stock via matrix-expand.js */

.kxep{padding:18px 22px;background:linear-gradient(180deg, rgba(96,165,250,.05), rgba(96,165,250,.02))}
[data-theme="dark"] .kxep{background:linear-gradient(180deg,#162033,#101828)}

.kxep-header{
    font-size:.86rem;font-weight:700;color:var(--text-primary);
    margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.kxep-badge{
    font-size:.68rem;background:var(--primary);color:#fff;padding:2px 9px;border-radius:10px;font-weight:700;letter-spacing:.02em;
}

.kxep-cols{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.kxep-left{flex:0 0 320px;min-width:280px;max-width:380px}
.kxep-right{flex:1;min-width:320px}

/* ---- Price ranking list ---- */
.kxep-list{
    background:var(--bg-card);border:1px solid var(--border);border-radius:10px;
    overflow:hidden;max-height:520px;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;
}
.kxep-list::-webkit-scrollbar{width:6px}
.kxep-list::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.kxep-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 16px;border-bottom:1px solid var(--border);
}
.kxep-row:last-child{border-bottom:none}
.kxep-row:hover{background:var(--bg-hover)}
.kxep-row.best{
    background:linear-gradient(90deg,var(--success-light) 0%, rgba(236,253,245,0) 100%);
    border-left:3px solid var(--success);
}
[data-theme="dark"] .kxep-row.best{background:linear-gradient(90deg,#064E3B 0%,#052e16 100%)}
.kxep-shop{font-weight:600;font-size:.84rem;color:var(--text-primary)}
.kxep-shop a{color:inherit;text-decoration:none}
.kxep-shop a:hover{color:var(--primary)}
.kxep-row.best .kxep-shop{color:var(--success)}
.kxep-val{font-weight:700;font-size:.9rem;color:var(--text-primary);font-variant-numeric:tabular-nums}
.kxep-row.best .kxep-val{color:var(--success)}
.kxep-empty{font-size:.82rem;color:var(--text-muted);padding:14px;text-align:center;background:var(--bg-card);border:1px dashed var(--border);border-radius:10px}

/* ---- Chart card ---- */
.kxep-chart-wrap{
    background:var(--bg-card);border:1px solid var(--border);border-radius:10px;
    padding:14px 16px 16px;
}
.kxep-chart-head{
    display:flex;justify-content:space-between;align-items:center;
    gap:10px;flex-wrap:wrap;margin-bottom:10px;
}
.kxep-chart-title{font-size:.84rem;font-weight:700;color:var(--text-primary)}
.kxep-ctrls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kxep-seg{
    display:inline-flex;gap:0;background:var(--bg-hover);border-radius:7px;padding:2px;border:1px solid var(--border);
}
.kxep-seg-btn{
    border:none;background:transparent;padding:5px 10px;font-size:.72rem;font-weight:600;
    color:var(--text-secondary);cursor:pointer;border-radius:5px;font-family:inherit;
    transition:all .12s;line-height:1.2;
}
.kxep-seg-btn:hover{color:var(--primary)}
.kxep-seg-btn.active{background:var(--bg-card);color:var(--primary);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.kxep-chart-box{position:relative;width:100%;height:280px}
.kxep-chart-loading{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:.82rem;color:var(--text-muted);
}
.kxep-spin{
    width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--primary);
    border-radius:50%;animation:kxep-spin .7s linear infinite;
}
@keyframes kxep-spin{to{transform:rotate(360deg)}}

/* ---- Apple Store stock chips ---- */
.kxep-stock{margin-top:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.kxep-stock-title{font-size:.8rem;font-weight:700;color:var(--text-primary);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.kxep-stock-meta{font-size:.7rem;color:var(--text-muted);font-weight:500;background:var(--bg-hover);padding:2px 8px;border-radius:10px}
.kxep-stock-chips{display:flex;flex-wrap:wrap;gap:5px}
.kxep-chip{
    font-size:.72rem;padding:5px 10px;border-radius:6px;font-weight:600;
    display:inline-flex;align-items:center;line-height:1;
}
.kxep-chip.yes{background:#059669;color:#fff;box-shadow:0 1px 3px rgba(5,150,105,.3)}
.kxep-chip.no{background:var(--bg-main);color:var(--text-muted);border:1px solid var(--border)}
[data-theme="dark"] .kxep-chip.yes{background:#059669;color:#fff}
[data-theme="dark"] .kxep-chip.no{background:#0F172A;color:#64748B;border-color:#334155}

/* ---- Action buttons ---- */
.kxep-actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.kxep-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
    padding:9px 18px;min-width:140px;
    border-radius:8px;font-size:.82rem;font-weight:600;text-decoration:none;
    transition:opacity .15s, transform .12s;border:1px solid transparent;font-family:inherit;
}
.kxep-btn:hover{opacity:.9;transform:translateY(-1px)}
.kxep-btn-primary{background:var(--primary);color:#fff}
.kxep-btn-amazon{background:linear-gradient(180deg,#FFB84D 0%,#FF9900 100%);color:#0F172A;border-color:#FF9900}
.kxep-btn-yahoo{background:#FF0033;color:#fff;border-color:#FF0033}
.kxep-btn-yahoo:hover{background:#E60030}
.kxep-btn-apple{background:#1D1D1F;color:#fff}
[data-theme="dark"] .kxep-btn-apple{background:#F5F5F7;color:#1D1D1F}

/* ---- Responsive ---- */
@media(max-width:780px){
    .kxep{padding:14px 12px}
    .kxep-cols{flex-direction:column;gap:14px}
    .kxep-left{flex:none;width:100%;max-width:100%;min-width:0}
    .kxep-right{min-width:0;width:100%}
    .kxep-chart-head{flex-direction:column;align-items:flex-start}
    .kxep-chart-box{height:240px}
    .kxep-btn{min-width:0;flex:1}
}