@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=IBM+Plex+Sans+JP:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import 'highlight.js/styles/github-dark.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* theme:light */
  :root {
    color-scheme: light;
    /* Neutral ramp — Tailwind's default slate values. Components use
       *-slate-* with semantic intent (50/100 = surfaces, 700/900 = text),
       so [data-theme=dark] inverts the ramp to flip fg/bg coherently. */
    --slate-50: #f8fafc;  --slate-100: #f1f5f9; --slate-200: #e2e8f0;
    --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
    --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b;
    --slate-900: #0f172a; --slate-950: #020617;
    --gray-400: #9ca3af; --gray-500: #6b7280; --gray-700: #374151;
    /* Semantic surface tokens (mirror tailwind.config.js). */
    --canvas: #ffffff; --surface: #fafafa; --surface-2: #f4f4f5;
    --hairline: #e4e4e7; --hairline-soft: #f4f4f5;
    --ink: #0f172a; --muted: #64748b;
    --scrollbar-thumb: #d4d4d8; --scrollbar-thumb-hover: #a1a1aa;
    /* Dark accent fallback (used only when /api/branding hasn't set
       --brand-primary*). Full runtime-branding + WCAG pairing is Phase 2. */
    --accent-on-dark: #fafafa; --accent-on-dark-fg: #18181b;
    /* Selected/active soft tint default (no-branding case). useBranding sets
       --brand-primary-soft inline when configured (theme-aware, see hook). */
    --brand-primary-soft: #f4f4f5;
  }

  [data-theme="dark"] {
    color-scheme: dark;
    /* Inverted neutral ramp (zinc-tuned). TUNE ON A REAL DISPLAY — dense UI
       borders rely on hairline; verify surface/surface-2/hairline separation
       and WCAG AA text contrast before shipping (spec §4.1 #6). */
    /* Dark backgrounds lifted a notch (was #0a0a0c/#16161a/#202024) for a
       softer, less pitch-black feel per user feedback. */
    --slate-50: #18181c;  --slate-100: #202024; --slate-200: #2a2a30;
    /* slate-400/500 lifted to clear WCAG AA on the (now brighter) canvas. */
    --slate-300: #44444d; --slate-400: #8a8a95; --slate-500: #a6a6b0;
    --slate-600: #b4b4bd; --slate-700: #c8c8d0; --slate-800: #e0e0e4;
    --slate-900: #f2f2f4; --slate-950: #fafafa;
    --gray-400: #6b7280; --gray-500: #9ca3af; --gray-700: #d1d5db;
    --canvas: #18181c; --surface: #202024; --surface-2: #2a2a30;
    --hairline: #3a3a42; --hairline-soft: #2a2a30;
    --ink: #e7e7ea; --muted: #a1a1aa;
    --scrollbar-thumb: #3f3f46; --scrollbar-thumb-hover: #52525b;
    --accent-on-dark: #fafafa; --accent-on-dark-fg: #18181b;
    /* Dark default for the selected/active soft tint (no-branding case). */
    --brand-primary-soft: #2c2c34;
  }

  /* When stored pref is 'system' the inline script sets data-theme already,
     but keep an OS fallback for the brief pre-script window / no-JS. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { color-scheme: dark; }
  }

  html, body, #root {
    min-height: 100dvh;
  }

  body {
    margin: 0;
    /* Refero-inspired refresh: cleaner canvas, slightly cooler text. */
    background-color: var(--canvas);
    color: var(--ink);
    font-family: 'IBM Plex Sans JP', 'Hiragino Sans', system-ui, sans-serif;
    font-size: 13px;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* iOS: prevent rubber-band overscroll at the document level so the
       fixed app shell stays put while scroll panes inside still scroll. */
    overscroll-behavior-y: none;
    /* iOS: respect notch / home-indicator. Components that are flush with
       the screen edge (TopBar, ChatPane composer) handle their own
       env(safe-area-inset-*) padding; this just keeps the body itself
       from disappearing under the home indicator on landscape orientations. */
  }

  * {
    box-sizing: border-box;
  }

  button, input, textarea, select {
    font: inherit;
  }

  /* モバイル: font-size < 16px の入力要素でフォーカス時に iOS Safari が自動ズームするのを防止。
   * (pointer: coarse) で実際のタッチデバイスのみに絞り、デスクトップの狭いウィンドウでは
   * Tailwind class のサイズをそのまま尊重する。 */
  @media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
      font-size: 16px !important;
    }
  }

  button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }

  .scrollbar-none {
    scrollbar-width: none;
  }
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
}

@layer components {
  /* Section header label, used for List column headers and detail sections.
     Inspired by Linear's information density: small, uppercase, tracked. */
  .section-label {
    @apply text-[10px] font-semibold uppercase tracking-[0.08em] text-slate-500;
  }

  /* Status / category chip. Default tone is neutral; override via
     additional bg/text/border classes per use site. */
  .chip {
    @apply inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium border;
    @apply bg-surface-2 text-slate-700 border-hairline;
  }

  /* Refined input baseline. Components opt in by adding `.input`. */
  .input {
    @apply h-8 px-2.5 rounded-md border border-hairline bg-canvas text-[13px] text-slate-900;
    @apply focus:outline-none focus:ring-2 focus:ring-accent-ring focus:border-accent;
    @apply transition-shadow;
  }

  /* Refined button baseline. Pair with .btn-primary, .btn-ghost, .btn-danger. */
  .btn {
    @apply inline-flex items-center justify-center gap-1.5 h-8 px-3 rounded-md text-[12px] font-medium border;
    @apply transition-[transform,background-color,color,border-color] duration-100;
    @apply active:scale-[0.97];
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring;
    @apply disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100;
  }

  /* Press feedback utility. Apply alongside any custom-styled button to
     give a 100ms scale-down on tap/click. Safe to combine with hover and
     transition utilities — the same transition channel is reused. */
  .tap-feedback {
    @apply active:scale-[0.97] transition-transform duration-100;
  }
  .btn-primary {
    @apply bg-accent text-accent-fg border-accent hover:bg-accent-deep;
  }
  .btn-ghost {
    @apply bg-canvas text-slate-700 border-hairline hover:bg-surface;
  }
  .btn-danger {
    @apply bg-canvas text-red-700 border-red-200 hover:bg-red-50 dark:hover:bg-red-500/15;
  }

  .chat-pet-overlay {
    position: absolute;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    pointer-events: none;
    width: var(--pet-size, 64px);
    height: var(--pet-size, 64px);
  }

  .pet-sprite {
    position: relative;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 10px 16px rgb(15 23 42 / 0.18));
    transform-origin: 50% 90%;
  }

  .pet-sprite img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    user-select: none;
  }

  .pet-sprite-fallback {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, #f8fafc, #22c55e 58%, #0f766e);
    border: 1px solid rgb(255 255 255 / 0.7);
    box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.08);
    position: relative;
  }

  .pet-sprite-fallback span {
    position: absolute;
    top: 35%;
    width: 10%;
    height: 10%;
    border-radius: 999px;
    background: #0f172a;
  }

  .pet-sprite-fallback span:first-child { left: 34%; }
  .pet-sprite-fallback span:last-child { right: 34%; }

  .pet-sprite-idle { animation: petIdle 1.8s ease-in-out infinite; }
  .pet-sprite-running { animation: petRun 0.65s ease-in-out infinite; }
  .pet-sprite-runningAlt { animation: petRun 0.65s ease-in-out infinite reverse; }
  .pet-sprite-dispatching { animation: petRun 0.85s ease-in-out infinite; }
  .pet-sprite-jumping { animation: petJump 0.55s ease-in-out infinite; }
  .pet-sprite-waiting { animation: petWait 1.4s ease-in-out infinite; }
  .pet-sprite-done { animation: petDone 1s cubic-bezier(.2, 1.35, .32, 1) forwards; }
  .pet-sprite-error { animation: petError 0.45s ease-in-out 2; }

  .pet-sprite-reduced {
    animation: none;
  }

  /* Mobile tab swap animation. Triggered by re-mounting the content via
     key={mobileTab}. Signals "your swipe / tap registered" with a 180ms
     fade + small horizontal slide. */
  @keyframes mobileTabSwap {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .animate-mobile-tab-swap {
    animation: mobileTabSwap 180ms ease-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .animate-mobile-tab-swap { animation: none; }
  }

  /* Live "flowing light" border for Browser/SSH tabs while a session is live.
     A bright arc travels around a thin rounded ring: a conic gradient rotated
     via the animatable --flow-angle custom property, masked to the border only.
     If @property is unsupported the angle stays at 0deg → a static glow ring
     (graceful degradation, no spin). */
  .live-flow-border {
    position: relative;
    border-radius: 7px;
  }
  .live-flow-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
      from var(--flow-angle, 0deg),
      transparent 0deg,
      var(--flow-color, #38bdf8) 50deg,
      #e0f2fe 72deg,
      transparent 112deg,
      transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: flowBorderSpin 2.4s linear infinite;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .live-flow-border::before { animation: none; opacity: 0.65; }
  }

  .tool-spark-burst {
    position: absolute;
    right: calc(var(--pet-size, 64px) * 0.5);
    bottom: calc(var(--pet-size, 64px) * 1.1);
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .tool-spark-bubble {
    position: absolute;
    left: -18px;
    top: -18px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--canvas);
    color: #0f766e;
    border: 1px solid rgb(15 23 42 / 0.08);
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.22), 0 0 0 6px rgb(45 212 191 / 0.18);
    animation: toolSparkPop 3000ms cubic-bezier(.2, 1.25, .35, 1) forwards;
  }

  .tool-spark-bubble svg {
    width: 20px;
    height: 20px;
  }

  .tool-spark-reduced {
    animation: toolSparkFade 3000ms ease-out forwards;
  }

  .tool-spark-particle {
    position: absolute;
    display: block;
    color: #facc15;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    animation: toolSparkParticle 3000ms cubic-bezier(.2, 1.25, .35, 1) forwards;
    filter: drop-shadow(0 0 4px rgb(250 204 21 / 0.65));
  }

  .tool-spark-particle svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  /* `output/...` workspace path links emitted by the linkifier
     (lib/output-path-detect.ts) and by the Marked renderer in
     lib/markdown-text.tsx. Both produce <a class="output-path-link"
     data-output-path="output/foo.md"> with NO href — without
     href, browsers don't apply pointer cursor / link styling by
     default, so we define them here once. The OutputPreviewProvider
     handles the click via document-level delegation. */
  .output-path-link {
    color: #2563eb; /* tailwind text-blue-600 */
    cursor: pointer;
    text-decoration: none;
  }
  .output-path-link:hover {
    text-decoration: underline;
  }
  .output-path-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 2px;
  }
}

/* Animatable angle for the live-flow-border conic gradient. Registering it as
   <angle> is what lets the rotation actually animate (a plain custom property
   animates discretely). Unsupported browsers ignore this and fall back to the
   0deg initial value → static ring. */
@property --flow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes flowBorderSpin {
  to { --flow-angle: 360deg; }
}

@keyframes petIdle {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-6px) rotate(1deg) scale(1.03); }
}

@keyframes petRun {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-8px) rotate(-7deg) scale(1.07); }
  50% { transform: translateY(0) rotate(0deg) scale(1); }
  75% { transform: translateY(-8px) rotate(7deg) scale(1.07); }
}

@keyframes petWait {
  0%, 100% { transform: scale(1); opacity: 0.82; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes petDone {
  0% { transform: translateY(0) scale(1); }
  32% { transform: translateY(-20px) scale(1.2); }
  68% { transform: translateY(-6px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes petError {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes petJump {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-22px) scale(1.12); }
  60%      { transform: translateY(-2px) scale(1.02); }
}

/* Frame-by-frame sprite cycling within the active state row.
   Explicit per-frame plateaus avoid the steps()-boundary flash that
   would briefly visit col N (which is transparent on Codex pets
   where the row has fewer than 8 filled frames). Pair with
   animation-timing-function: linear and background-repeat: repeat-x. */
@keyframes petFrameCycle1 { from, to { background-position-x: 0%; } }
@keyframes petFrameCycle2 {
  0%, 49.99% { background-position-x: 0%; }
  50%, 100% { background-position-x: -100%; }
}
@keyframes petFrameCycle3 {
  0%, 33.32% { background-position-x: 0%; }
  33.33%, 66.65% { background-position-x: -100%; }
  66.66%, 100% { background-position-x: -200%; }
}
@keyframes petFrameCycle4 {
  0%, 24.99% { background-position-x: 0%; }
  25%, 49.99% { background-position-x: -100%; }
  50%, 74.99% { background-position-x: -200%; }
  75%, 100% { background-position-x: -300%; }
}
@keyframes petFrameCycle5 {
  0%, 19.99% { background-position-x: 0%; }
  20%, 39.99% { background-position-x: -100%; }
  40%, 59.99% { background-position-x: -200%; }
  60%, 79.99% { background-position-x: -300%; }
  80%, 100% { background-position-x: -400%; }
}
@keyframes petFrameCycle6 {
  0%, 16.65% { background-position-x: 0%; }
  16.66%, 33.32% { background-position-x: -100%; }
  33.33%, 49.99% { background-position-x: -200%; }
  50%, 66.65% { background-position-x: -300%; }
  66.66%, 83.32% { background-position-x: -400%; }
  83.33%, 100% { background-position-x: -500%; }
}
@keyframes petFrameCycle7 {
  0%, 14.27% { background-position-x: 0%; }
  14.28%, 28.56% { background-position-x: -100%; }
  28.57%, 42.84% { background-position-x: -200%; }
  42.85%, 57.13% { background-position-x: -300%; }
  57.14%, 71.41% { background-position-x: -400%; }
  71.42%, 85.70% { background-position-x: -500%; }
  85.71%, 100% { background-position-x: -600%; }
}
@keyframes petFrameCycle8 {
  0%, 12.49% { background-position-x: 0%; }
  12.5%, 24.99% { background-position-x: -100%; }
  25%, 37.49% { background-position-x: -200%; }
  37.5%, 49.99% { background-position-x: -300%; }
  50%, 62.49% { background-position-x: -400%; }
  62.5%, 74.99% { background-position-x: -500%; }
  75%, 87.49% { background-position-x: -600%; }
  87.5%, 100% { background-position-x: -700%; }
}

@keyframes toolSparkPop {
  0%   { transform: translate(0, 12px) scale(.4);  opacity: 0; }
  8%   { transform: translate(0, -14px) scale(1.25); opacity: 1; }
  14%  { transform: translate(0, -18px) scale(1.05); opacity: 1; }
  85%  { transform: translate(0, -20px) scale(1);   opacity: 1; }
  100% { transform: translate(0, -28px) scale(.85); opacity: 0; }
}

@keyframes toolSparkFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Parabolic trajectory for sparkle particles.
   Vertical (y): rises to ~150px above spawn around t=45%, returns to spawn at
   ~80%, then continues falling to ~+150px by t=100%. Roughly approximates
   y(t) = v0*t - 0.5*g*t² in piecewise-linear keyframes.
   Horizontal (x): linear with time, scaled by --p-vx (= cos(angleFromHorizontal))
   set inline per particle. With launch angle in [85°, 95°] the |vx| is ≤ 0.087,
   amplified by 700px so the lateral spread is roughly ±60px at the end. */
@keyframes toolSparkParticle {
  0%   { transform: translate(0, 0) rotate(var(--p-rot, 0deg)) scale(.3); opacity: 0; }
  4%   { transform: translate(calc(var(--p-vx, 0) * 28px),  -28px) rotate(var(--p-rot, 0deg)) scale(1.15); opacity: 1; }
  20%  { transform: translate(calc(var(--p-vx, 0) * 140px), -110px) rotate(var(--p-rot, 0deg)) scale(1); opacity: 1; }
  45%  { transform: translate(calc(var(--p-vx, 0) * 315px), -150px) rotate(var(--p-rot, 0deg)) scale(.95); opacity: 1; }
  65%  { transform: translate(calc(var(--p-vx, 0) * 455px), -90px) rotate(var(--p-rot, 0deg)) scale(.9); opacity: 1; }
  80%  { transform: translate(calc(var(--p-vx, 0) * 560px), 0px) rotate(var(--p-rot, 0deg)) scale(.85); opacity: 1; }
  92%  { transform: translate(calc(var(--p-vx, 0) * 644px), 90px) rotate(var(--p-rot, 0deg)) scale(.7); opacity: .7; }
  100% { transform: translate(calc(var(--p-vx, 0) * 700px), 150px) rotate(var(--p-rot, 0deg)) scale(.5); opacity: 0; }
}

/* === Markdown reader (MDXG-inspired) ===
   Zenn/Qiita-like reading polish for .md preview. Scoped to `.mdxg-reader`
   so chat bubbles (using bare MarkdownPreview without this class) keep
   their compact look. */
.mdxg-copy, .mdxg-lang { display: none; }
.mdxg-reader pre {
  position: relative;
  padding: 0.75rem 1rem;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 0.5rem;
  overflow-x: auto;
  color: #e6edf3;
}
.mdxg-reader pre code.hljs {
  padding: 0;
  background: transparent;
  color: #e6edf3;
  font-size: 0.8125rem;
  line-height: 1.55;
}
/* Markdown fenced code blocks: enforce monospace regardless of prose/typography overrides */
.prose pre,
.prose pre code,
.prose pre code.hljs,
.mdxg-reader pre,
.mdxg-reader pre code.hljs {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
/* Mermaid diagrams: opt out of the dark <pre> chrome since mermaid renders its own SVG */
.prose pre.mermaid,
.mdxg-reader pre.mermaid {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}
.mdxg-reader pre .mdxg-lang {
  display: inline-block;
  position: absolute;
  top: 0.4rem;
  right: 2.5rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8b949e;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  user-select: none;
}
.mdxg-reader pre .mdxg-copy {
  display: inline-block;
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  border-radius: 0.25rem;
  border: 1px solid #30363d;
  background: #21262d;
  color: #c9d1d9;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.mdxg-reader pre:hover .mdxg-copy,
.mdxg-reader pre .mdxg-copy:focus { opacity: 1; }
.mdxg-reader pre .mdxg-copy:hover { background: #30363d; color: #ffffff; }
.mdxg-reader pre .mdxg-copy.copied { color: #7ee787; border-color: #2ea043; }

/* GitHub Dark トークンパレット (.mdxg-reader scope のみ) */
.mdxg-reader pre .hljs-comment,
.mdxg-reader pre .hljs-quote { color: #8b949e; font-style: italic; }
.mdxg-reader pre .hljs-keyword,
.mdxg-reader pre .hljs-selector-tag,
.mdxg-reader pre .hljs-literal,
.mdxg-reader pre .hljs-section,
.mdxg-reader pre .hljs-link,
.mdxg-reader pre .hljs-meta { color: #ff7b72; }
.mdxg-reader pre .hljs-string,
.mdxg-reader pre .hljs-symbol,
.mdxg-reader pre .hljs-attr { color: #a5d6ff; }
.mdxg-reader pre .hljs-number,
.mdxg-reader pre .hljs-bullet { color: #79c0ff; }
.mdxg-reader pre .hljs-title,
.mdxg-reader pre .hljs-title\.function_,
.mdxg-reader pre .hljs-name,
.mdxg-reader pre .hljs-selector-id,
.mdxg-reader pre .hljs-selector-class { color: #d2a8ff; }
.mdxg-reader pre .hljs-variable,
.mdxg-reader pre .hljs-template-variable,
.mdxg-reader pre .hljs-params { color: #ffa657; }
.mdxg-reader pre .hljs-built_in,
.mdxg-reader pre .hljs-type { color: #79c0ff; }
.mdxg-reader pre .hljs-tag { color: #7ee787; }
.mdxg-reader pre .hljs-doctag,
.mdxg-reader pre .hljs-strong { font-weight: 700; }
.mdxg-reader pre .hljs-emphasis { font-style: italic; }
.mdxg-reader pre .hljs-deletion { color: #ffa198; background: rgba(255, 129, 130, 0.15); }
.mdxg-reader pre .hljs-addition { color: #7ee787; background: rgba(46, 160, 67, 0.15); }

/* Task list */
.mdxg-reader ul.task-list,
.mdxg-reader ul:has(> li > input[type="checkbox"]) {
  list-style: none;
  padding-left: 0;
}
.mdxg-reader li.task-list-item {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.mdxg-reader li input[type="checkbox"] {
  margin-right: 0.5rem;
  vertical-align: middle;
  accent-color: #18181b;
}

/* Tables */
.mdxg-reader table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8125rem;
  margin: 0.75rem 0;
}
.mdxg-reader thead th {
  background: #f4f4f5;
  font-weight: 600;
  text-align: left;
  border-bottom: 2px solid #d4d4d8;
  padding: 0.4rem 0.75rem;
}
.mdxg-reader tbody td {
  border-bottom: 1px solid #e4e4e7;
  padding: 0.4rem 0.75rem;
}
.mdxg-reader tbody tr:nth-child(even) { background: #fafafa; }

/* Blockquote */
.mdxg-reader blockquote {
  border-left: 3px solid var(--brand-primary, #18181b);
  background: #fafafa;
  padding: 0.5rem 1rem;
  margin: 1.2em 0;
  color: #3f3f46;
  font-style: normal;
  font-weight: normal;
  border-radius: 0 0.25rem 0.25rem 0;
}
.mdxg-reader blockquote > :first-child { margin-top: 0; }
.mdxg-reader blockquote > :last-child { margin-bottom: 0; }
/* prose が blockquote::before/::after に "..." を挿入するのを抑止 */
.mdxg-reader blockquote p::before,
.mdxg-reader blockquote p::after { content: none; }

/* Headings with visual hierarchy */
.mdxg-reader h1,
.mdxg-reader h2,
.mdxg-reader h3,
.mdxg-reader h4,
.mdxg-reader h5,
.mdxg-reader h6 {
  scroll-margin-top: 1rem;
  position: relative;
  color: #18181b;
}

/* H1: 下線 */
.mdxg-reader h1 {
  border-bottom: 2px solid #18181b;
  padding-bottom: 0.3em;
  margin-top: 0;
  margin-bottom: 0.8em;
}

/* H2: 左に太いアクセントバー */
.mdxg-reader h2 {
  border-left: 4px solid #18181b;
  padding-left: 0.65em;
  margin-top: 2em;
  margin-bottom: 0.7em;
  line-height: 1.3;
}

/* H3: 左に小さな丸ドット */
.mdxg-reader h3 {
  padding-left: 0.9em;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}
.mdxg-reader h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #18181b;
}

.mdxg-reader h1 .mdxg-anchor,
.mdxg-reader h2 .mdxg-anchor,
.mdxg-reader h3 .mdxg-anchor {
  position: absolute;
  left: -1.1rem;
  color: #d4d4d8;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
  font-weight: normal;
}
.mdxg-reader h1:hover .mdxg-anchor,
.mdxg-reader h2:hover .mdxg-anchor,
.mdxg-reader h3:hover .mdxg-anchor { opacity: 1; }

/* Inline code (Zenn-style: 薄ピンク背景 + 濃い赤文字) */
.mdxg-reader :not(pre) > code {
  background: #fef2f2;
  color: #be185d;
  border: 1px solid #fecdd3;
  border-radius: 0.25rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.85em;
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
/* prose プラグインが code::before/::after で backtick を挿入するのを抑止 */
.mdxg-reader :not(pre) > code::before,
.mdxg-reader :not(pre) > code::after {
  content: none;
}

/* Links (アクセントブルー + hover 下線) */
.mdxg-reader a:not(.mdxg-anchor):not(.mdxg-copy) {
  color: #0ea5e9;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.mdxg-reader a:not(.mdxg-anchor):not(.mdxg-copy):hover {
  color: #0284c7;
  border-bottom-color: #0ea5e9;
}

/* Strong */
.mdxg-reader strong, .mdxg-reader b {
  color: #18181b;
  font-weight: 700;
}

/* List bullets — task list は除外 (list-style: none で既に非表示) */
.mdxg-reader ul:not(.task-list) > li::marker,
.mdxg-reader ol > li::marker {
  color: #0ea5e9;
}
.mdxg-reader ol > li::marker { font-weight: 600; }

/* コードブロックの上下余白を広く */
.mdxg-reader pre { margin: 1.2em 0; }

/* Outline sidebar */
.mdxg-outline {
  font-size: 0.75rem;
  line-height: 1.5;
}
.mdxg-outline a {
  display: block;
  color: #52525b;
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  border-left: 2px solid transparent;
  transition: background 0.1s, color 0.1s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mdxg-outline a:hover { background: #f4f4f5; color: #18181b; }
.mdxg-outline a.active {
  color: #18181b;
  background: #f4f4f5;
  border-left-color: var(--brand-primary, #18181b);
  font-weight: 600;
}
.mdxg-outline a.depth-2 { padding-left: 1.25rem; }
.mdxg-outline a.depth-3 { padding-left: 2rem; font-size: 0.7rem; }

/* ── Dark mode overrides for the MD reader + outline ───────────────────
   `.mdxg-reader pre` (code blocks) are github-dark already and stay as-is.
   Body text comes from `prose prose-slate` whose slate scale is var-remapped
   (auto light in dark). These override only the hardcoded light-mode chrome
   (#18181b headings, light table/blockquote fills, pink inline code, the
   outline's light hover/active) that would otherwise be dark-on-dark or a
   light island in dark mode. */
[data-theme="dark"] .mdxg-reader h1,
[data-theme="dark"] .mdxg-reader h2,
[data-theme="dark"] .mdxg-reader h3,
[data-theme="dark"] .mdxg-reader h4,
[data-theme="dark"] .mdxg-reader h5,
[data-theme="dark"] .mdxg-reader h6,
[data-theme="dark"] .mdxg-reader strong,
[data-theme="dark"] .mdxg-reader b { color: var(--ink); }
[data-theme="dark"] .mdxg-reader h1 { border-bottom-color: var(--slate-700); }
[data-theme="dark"] .mdxg-reader h2 { border-left-color: var(--slate-700); }
[data-theme="dark"] .mdxg-reader h3::before { background: var(--slate-700); }
[data-theme="dark"] .mdxg-reader h1 .mdxg-anchor,
[data-theme="dark"] .mdxg-reader h2 .mdxg-anchor,
[data-theme="dark"] .mdxg-reader h3 .mdxg-anchor { color: var(--slate-500); }
[data-theme="dark"] .mdxg-reader thead th { background: var(--surface-2); border-bottom-color: var(--hairline); }
[data-theme="dark"] .mdxg-reader tbody td { border-bottom-color: var(--hairline); }
[data-theme="dark"] .mdxg-reader tbody tr:nth-child(even) { background: var(--surface); }
[data-theme="dark"] .mdxg-reader blockquote { background: var(--surface); color: var(--muted); }
[data-theme="dark"] .mdxg-reader :not(pre) > code {
  background: var(--surface-2);
  color: #f3a4c0;
  border-color: var(--hairline);
}
[data-theme="dark"] .mdxg-outline a { color: var(--muted); }
[data-theme="dark"] .mdxg-outline a:hover { background: var(--surface-2); color: var(--ink); }
[data-theme="dark"] .mdxg-outline a.active { background: var(--surface-2); color: var(--ink); }
