/* ==============================================
   GREEGION NEWS — AI Insight Media
   ============================================== */

:root {
  --bg: #FAFBFD; --bg-alt: #F0F2F8;
  --card: #FFFFFF; --card-hover: #F8F9FC;
  --line: rgba(0,0,0,0.06); --line2: rgba(0,0,0,0.10);
  --text: #1A1A2E; --text-secondary: #3D3D56;
  --muted: #6B7084; --subtle: #9CA3AF;
  --accent: #2563EB; --accent2: #7C3AED;
  --accent-light: rgba(37,99,235,0.08);
  --gradient: linear-gradient(135deg,#2563EB,#7C3AED);
  --gradient-soft: linear-gradient(135deg,rgba(37,99,235,0.1),rgba(124,58,237,0.1));
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06),0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08),0 4px 12px rgba(0,0,0,0.04);
  --shadow-accent: 0 4px 24px rgba(37,99,235,0.25);
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
  --container: 540px;
  --sans: 'Inter', system-ui, sans-serif;
  --jp: 'Noto Sans JP', sans-serif;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--jp); font-size: 16px;
  background: var(--bg); color: var(--text);
  line-height: 1.75; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; }

/* ── scroll progress ── */
.scroll-progress { position:fixed; top:0; left:0; width:100%; height:3px; z-index:200; pointer-events:none; }
.scroll-progress-bar { height:100%; width:0%; background:var(--gradient); border-radius:0 2px 2px 0; transition:width 0.1s linear; }

/* ── bg mesh ── */
.bg-mesh { position:fixed; inset:0; z-index:-1; background:var(--bg); overflow:hidden; }
.bg-mesh::before {
  content:''; position:absolute; width:600px; height:600px; top:-200px; left:-200px;
  background:radial-gradient(circle,rgba(37,99,235,0.06) 0%,transparent 70%);
  animation:meshFloat 12s ease-in-out infinite;
}
.bg-mesh::after {
  content:''; position:absolute; width:400px; height:400px; bottom:100px; right:-100px;
  background:radial-gradient(circle,rgba(124,58,237,0.05) 0%,transparent 70%);
  animation:meshFloat 16s ease-in-out infinite reverse;
}
@keyframes meshFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }

/* ── app shell ── */
.app-shell { max-width:var(--container); margin:0 auto; background:var(--bg); min-height:100dvh; border-left:1px solid var(--line); border-right:1px solid var(--line); box-shadow:var(--shadow-lg); }

/* ── nav ── */
.nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.5rem; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:100;
  background:rgba(250,251,253,0.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transition:box-shadow 0.35s;
}
.nav.nav-scrolled { box-shadow:var(--shadow-sm); }
.nav-logo {
  font-family:var(--sans); font-size:1.05rem; font-weight:800;
  letter-spacing:0.08em; text-transform:uppercase;
  background:var(--gradient); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.nav-back {
  display:flex; align-items:center; gap:0.35rem;
  font-family:var(--sans); font-size:0.85rem; font-weight:600;
  color:var(--muted); transition:color 0.25s;
}
.nav-back:hover { color:var(--accent); }
.nav-badge {
  font-family:var(--sans); font-size:0.7rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  background:var(--gradient); color:#fff;
  padding:0.2rem 0.65rem; border-radius:100px;
}

/* ── hero ── */
.news-hero {
  padding:3rem 1.5rem 2rem;
  border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.news-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent); opacity:.3;
}
.news-hero-eyebrow {
  display:block; font-family:var(--sans); font-size:0.75rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  background:var(--gradient); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:0.6rem;
}
.news-hero-title {
  font-family:var(--jp); font-size:clamp(1.5rem,5vw,2rem);
  font-weight:800; line-height:1.4; letter-spacing:-0.02em; margin-bottom:0.6rem;
}
.news-hero-title em {
  font-style:normal; background:var(--gradient);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.news-hero-sub { font-size:0.9rem; color:var(--muted); line-height:1.7; }
.update-badge {
  display:inline-flex; align-items:center; gap:0.4rem; margin-top:1.25rem;
  background:var(--accent-light); border:1px solid rgba(37,99,235,0.15);
  border-radius:100px; padding:0.3rem 0.75rem;
  font-family:var(--sans); font-size:0.75rem; font-weight:600; color:var(--accent);
}
.update-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

/* ══════════════════════════════════════════════
   CATEGORY TABS
══════════════════════════════════════════════ */
.category-tabs {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 1rem 1.5rem 0.5rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }

.cat-tab {
  flex-shrink: 0;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  padding: 0.4rem 1rem; border-radius: 100px;
  border: 1.5px solid var(--line2);
  background: var(--card); color: var(--muted);
  cursor: pointer; white-space: nowrap;
  transition: all 0.22s var(--ease-out); line-height: 1;
}
.cat-tab:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.cat-tab.is-active {
  background: var(--gradient); color: #fff;
  border-color: transparent; box-shadow: var(--shadow-accent);
  font-weight: 700;
}

/* ══════════════════════════════════════════════
   TAG FILTER BAR
══════════════════════════════════════════════ */
.tag-filter-bar {
  padding:1rem 1.5rem 0;
  display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center;
}
.tag-filter-label {
  font-family:var(--sans); font-size:0.72rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--subtle);
  margin-right:0.25rem; white-space:nowrap;
}
.filter-btn {
  font-family:var(--sans); font-size:0.78rem; font-weight:600;
  padding:0.3rem 0.85rem; border-radius:100px; border:1.5px solid var(--line2);
  background:var(--card); color:var(--muted); cursor:pointer;
  transition:all 0.2s var(--ease-out); white-space:nowrap;
  line-height:1;
}
.filter-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.filter-btn.is-active {
  background:var(--gradient); color:#fff;
  border-color:transparent; box-shadow:var(--shadow-accent);
}

/* ── news list ── */
.news-list { padding:1.25rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:1rem; }

/* ══════════════════════════════════════════════
   ARTICLE CARD
══════════════════════════════════════════════ */
.article-card {
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow 0.3s var(--ease-out), border-color 0.3s, transform 0.3s var(--ease-out);
  position:relative;
}
.article-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:var(--gradient); opacity:0; transition:opacity 0.3s;
}
.article-card:hover { box-shadow:var(--shadow-md); border-color:var(--line2); }
.article-card[open]::before, .article-card.is-open::before { opacity:1; }

/* card summary / top area */
.card-summary {
  padding:1.4rem; cursor:pointer;
  list-style:none; /* remove <summary> triangle */
  -webkit-user-select:none; user-select:none;
}
/* hide native details arrow in all browsers */
.article-card > summary { list-style:none; }
.article-card > summary::-webkit-details-marker { display:none; }

.card-meta {
  display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; flex-wrap:wrap;
}
.card-tag {
  font-family:var(--sans); font-size:0.68rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  background:var(--gradient-soft); color:var(--accent);
  border:1px solid rgba(37,99,235,0.15); border-radius:100px; padding:0.15rem 0.6rem;
}
.card-date { font-family:var(--sans); font-size:0.75rem; color:var(--subtle); margin-left:auto; }
.has-audio-tag {
  display:flex; align-items:center; gap:0.3rem;
  font-family:var(--sans); font-size:0.68rem; font-weight:600; color:var(--accent2);
  background:rgba(124,58,237,0.08); border:1px solid rgba(124,58,237,0.15);
  border-radius:100px; padding:0.15rem 0.6rem;
}

/* tag pills on card */
.card-tag-pills { display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:0.65rem; }
.tag-pill {
  font-family:var(--sans); font-size:0.68rem; font-weight:600;
  padding:0.2rem 0.6rem; border-radius:100px;
  background:linear-gradient(135deg,rgba(37,99,235,0.08),rgba(124,58,237,0.08));
  border:1px solid rgba(124,58,237,0.18); color:var(--accent2);
  cursor:pointer; transition:all 0.2s;
}
.tag-pill:hover { background:var(--gradient); color:#fff; border-color:transparent; }

.card-title {
  font-family:var(--jp); font-size:1.05rem; font-weight:700;
  color:var(--text); line-height:1.5; margin-bottom:0.75rem;
}
.card-insight {
  background:var(--bg-alt); border-radius:var(--r-sm); padding:0.85rem 1rem; margin-bottom:0.85rem;
}
.card-insight-label {
  display:block; font-family:var(--sans); font-size:0.68rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  background:var(--gradient); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:0.4rem;
}
.card-insight-text { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; }
.card-insight-text p { margin-bottom: 0.6rem; }
.card-insight-text p:last-child { margin-bottom: 0; }

/* toggle row & button */
.card-toggle-row { display:flex; align-items:center; justify-content:space-between; }
.card-toggle-btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-family:var(--sans); font-size:0.82rem; font-weight:600; color:var(--accent);
  background:none; border:none; cursor:pointer; padding:0;
  transition:color 0.2s;
}
.card-toggle-btn:hover { color:var(--accent2); }
.chevron { display:flex; align-items:center; transition:transform 0.35s var(--ease-out); }
.article-card.is-open .chevron { transform:rotate(180deg); }

/* mini play btn */
.mini-play-btn {
  width:32px; height:32px; border-radius:50%;
  background:var(--gradient); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-accent); transition:transform 0.2s var(--ease-spring);
}
.mini-play-btn:hover { transform:scale(1.1); }

/* ══════════════════════════════════════════════
   ACCORDION BODY
   Uses JS-toggled .is-open class — no details/summary tricks
══════════════════════════════════════════════ */
.card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease-out), opacity 0.3s ease;
  opacity: 0;
}
.article-card.is-open .card-body {
  max-height: 1200px;
  opacity: 1;
}
.card-body-inner {
  padding:0 1.4rem 1.4rem;
  border-top:1px solid var(--line);
  padding-top:1.25rem;
  display:flex; flex-direction:column; gap:1rem;
}

/* insight – tech block */
.insight-block {
  border-radius:var(--r-md); padding:1rem 1.1rem; border:1px solid var(--line);
}
.insight-block--tech {
  border-left:3px solid var(--accent2);
  background:linear-gradient(135deg,rgba(124,58,237,0.03) 0%,var(--card) 100%);
}
.insight-block-header { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.75rem; }
.insight-block-icon {
  width:32px; height:32px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; flex-shrink:0; background:rgba(124,58,237,0.1);
}
.insight-block-title {
  font-family:var(--sans); font-size:0.75rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--accent2);
}
.insight-block-content {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-height: 350px;
  overflow-y: auto;
  padding-right: 6px; /* room for scrollbar */
}
.insight-block-content p { margin-bottom: 0.6rem; }
.insight-block-content p:last-child { margin-bottom: 0; }

/* custom scrollbar — thin & subtle */
.insight-block-content::-webkit-scrollbar { width: 4px; }
.insight-block-content::-webkit-scrollbar-track { background: transparent; }
.insight-block-content::-webkit-scrollbar-thumb {
  background: rgba(124,58,237,0.25);
  border-radius: 4px;
}
.insight-block-content::-webkit-scrollbar-thumb:hover {
  background: rgba(124,58,237,0.5);
}

/* source link */
.source-block {
  display:flex; align-items:center; gap:0.75rem;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-md);
  padding:0.85rem 1rem; transition:border-color 0.2s,background 0.2s;
}
.source-block:hover { border-color:rgba(37,99,235,0.3); background:var(--accent-light); }
.source-block-icon {
  width:32px; height:32px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
  color:var(--muted); flex-shrink:0;
}
.source-block-label {
  font-family:var(--sans); font-size:0.7rem; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--subtle); margin-bottom:0.1rem;
}
.source-block-url { font-family:var(--sans); font-size:0.82rem; font-weight:600; color:var(--accent); word-break:break-all; }

/* ── audio player ── */
.audio-player {
  background:linear-gradient(135deg,#1A1A2E 0%,#2D1B69 100%);
  border-radius:var(--r-lg); padding:1.25rem;
  box-shadow:0 8px 32px rgba(37,99,235,0.2); position:relative; overflow:hidden;
}
.audio-player::before {
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle at 30% 30%,rgba(37,99,235,0.15) 0%,transparent 50%),
              radial-gradient(circle at 70% 70%,rgba(124,58,237,0.12) 0%,transparent 50%);
  pointer-events:none;
}
.player-label { display:flex; align-items:center; gap:0.5rem; margin-bottom:1rem; }
.player-label-icon { width:26px; height:26px; background:rgba(255,255,255,0.1); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.player-label-text { font-family:var(--sans); font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.player-controls { display:flex; align-items:center; gap:0.85rem; margin-bottom:1rem; position:relative; z-index:1; }
.play-btn {
  width:46px; height:46px; border-radius:50%; background:var(--gradient); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(37,99,235,0.4); transition:all 0.25s var(--ease-spring); flex-shrink:0;
}
.play-btn:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(37,99,235,0.5); }
.play-btn:active { transform:scale(0.96); }
.play-btn svg { color:#fff; }
.player-info { flex:1; min-width:0; }
.player-track { font-family:var(--jp); font-size:0.84rem; font-weight:700; color:#fff; line-height:1.4; margin-bottom:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-sub { font-family:var(--sans); font-size:0.7rem; color:rgba(255,255,255,0.45); letter-spacing:.04em; }
.player-time { font-family:var(--sans); font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.65); white-space:nowrap; }
.waveform { display:flex; align-items:center; gap:2px; height:18px; margin-bottom:0.5rem; }
.wave-bar { width:3px; background:rgba(255,255,255,0.22); border-radius:2px; transition:height .1s ease,background .1s ease; }
.wave-bar.is-playing { animation:wavePulse .6s ease-in-out infinite alternate; background:rgba(255,255,255,0.65); }
@keyframes wavePulse { from{height:4px} to{height:var(--h,14px)} }
.seek-bar {
  width:100%; height:4px; border-radius:2px; outline:none; cursor:pointer;
  appearance:none; -webkit-appearance:none; background:rgba(255,255,255,0.15);
  position:relative; z-index:1;
}
.seek-bar::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.2); cursor:pointer; transition:transform .2s var(--ease-spring); }
.seek-bar::-webkit-slider-thumb:hover { transform:scale(1.3); }
.seek-bar::-moz-range-thumb { width:13px; height:13px; border:none; border-radius:50%; background:#fff; cursor:pointer; }

/* ── skeleton ── */
.skeleton-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem; box-shadow:var(--shadow-sm); }
.skel-inner { height:120px; border-radius:var(--r-sm); background:linear-gradient(90deg,var(--bg-alt) 25%,var(--card-hover) 50%,var(--bg-alt) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; }
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* ── empty / error ── */
.news-empty { padding:3rem 1.5rem; text-align:center; }
.empty-icon { font-size:2.5rem; margin-bottom:1rem; }

/* ── reveal ── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease-out),transform .55s var(--ease-out); }
.reveal.is-visible { opacity:1; transform:none; }

/* hidden card for filter */
.article-card[hidden] { display:none; }

/* ── load more ── */
.load-more-container {
  padding: 0.5rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.load-more-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans); font-size: 0.88rem; font-weight: 700;
  color: var(--accent); background: var(--accent-light);
  border: 1.5px solid rgba(37,99,235,0.25); border-radius: 100px;
  padding: 0.65rem 1.5rem; cursor: pointer;
  transition: all 0.25s var(--ease-spring);
}
.load-more-btn:hover {
  background: var(--gradient); color: #fff;
  border-color: transparent; box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}
.load-more-btn:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none;
}
.load-more-icon { transition: transform 0.3s var(--ease-spring); }
.load-more-btn:hover .load-more-icon { transform: translateY(2px); }
.load-more-end {
  font-family: var(--sans); font-size: 0.8rem; color: var(--subtle);
  text-align: center; padding: 0.5rem;
}

/* ── share row ── */
.card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.share-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.share-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.38rem 0.75rem;
  border-radius: 100px;
  border: 1.5px solid var(--line2);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s var(--ease-out);
  line-height: 1;
}
.share-icon-btn:hover { border-color: transparent; }
.share-x:hover        { background: #000; color: #fff; }
.share-threads:hover  { background: #000; color: #fff; }
.share-copy:hover     { background: var(--gradient); color: #fff; box-shadow: var(--shadow-accent); }

/* ── toast ── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--text);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── footer ── */
.footer { display:flex; justify-content:space-between; align-items:center; padding:1.5rem; border-top:1px solid var(--line); background:var(--bg-alt); }
.footer-logo { font-family:var(--sans); font-size:0.8rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.footer-copy { font-family:var(--sans); font-size:0.78rem; color:var(--subtle); }