/* ============================================================================
   Prism · MD3 components — buttons, chips, cards, fields, dialogs, snackbar,
   article (md-content) styles, skeletons, ripple
   ========================================================================== */

/* ---------------------------------- ripple ---------------------------------- */

.ripple-host { position: relative; overflow: hidden; }

.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: 0.14;
  transform: scale(0);
  animation: ripple-grow 550ms var(--ease-emphasized-decel) forwards;
}
@keyframes ripple-grow {
  to { transform: scale(2.6); opacity: 0; }
}

/* --------------------------------- buttons ---------------------------------- */

.btn {
  --btn-bg: var(--md-primary);
  --btn-fg: var(--md-on-primary);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0 1.5rem;
  border: none;
  border-radius: var(--shape-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--type-label-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: box-shadow var(--dur-short) var(--ease-standard),
              transform var(--dur-short) var(--ease-standard),
              background-color var(--dur-short) var(--ease-standard);
}
.btn:hover {
  text-decoration: none;
  box-shadow: var(--elev-1);
  background: color-mix(in oklch, var(--btn-fg) var(--state-hover), var(--btn-bg));
}
.btn:active { transform: scale(0.97); box-shadow: none; }
.btn:disabled, .btn--disabled { opacity: 0.38; pointer-events: none; }

.btn--tonal { --btn-bg: var(--md-secondary-container); --btn-fg: var(--md-on-secondary-container); }
.btn--tertiary { --btn-bg: var(--md-tertiary-container); --btn-fg: var(--md-on-tertiary-container); }
.btn--text { --btn-bg: transparent; --btn-fg: var(--md-primary); }
.btn--text:hover { box-shadow: none; background: color-mix(in oklch, var(--md-primary) var(--state-hover), transparent); }
.btn--outline {
  --btn-bg: transparent; --btn-fg: var(--md-primary);
  border: 1px solid var(--md-outline);
}
.btn--outline:hover { box-shadow: none; background: color-mix(in oklch, var(--md-primary) var(--state-hover), transparent); }
.btn--danger { --btn-bg: var(--md-error-container); --btn-fg: var(--md-on-error-container); }
.btn--sm { min-height: 2.1rem; padding: 0 1rem; font-size: var(--type-label-md); }

.btn .icon { width: 1.125rem; height: 1.125rem; }

/* icon button */
.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: none;
  border-radius: var(--shape-full);
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-standard),
              color var(--dur-short) var(--ease-standard),
              transform var(--dur-short) var(--ease-spring);
}
.iconbtn:hover { background: color-mix(in oklch, var(--md-on-surface-variant) var(--state-hover), transparent); }
.iconbtn:active { transform: scale(0.88); }
.iconbtn .icon { width: 1.4rem; height: 1.4rem; }
.iconbtn--filled { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.iconbtn--filled:hover { background: color-mix(in oklch, var(--md-on-secondary-container) var(--state-hover), var(--md-secondary-container)); }

/* FAB */
.fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 3.5rem;
  min-width: 3.5rem;
  padding: 0 1.25rem;
  border: none;
  border-radius: var(--shape-lg);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-label-lg);
  cursor: pointer;
  box-shadow: var(--elev-3);
  transition: box-shadow var(--dur-short) var(--ease-standard),
              transform var(--dur-medium) var(--ease-spring),
              border-radius var(--dur-medium) var(--ease-emphasized);
}
.fab:hover { box-shadow: var(--elev-4); transform: translateY(-2px); }
.fab:active { transform: scale(0.95); }
.fab .icon { width: 1.5rem; height: 1.5rem; }

/* ---------------------------------- chips ------------------------------------ */

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.15rem 0.9rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-sm);
  background: transparent;
  color: var(--md-on-surface-variant);
  font-size: var(--type-label-lg);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-standard),
              border-color var(--dur-short) var(--ease-standard),
              color var(--dur-short) var(--ease-standard);
}
.chip:hover {
  text-decoration: none;
  background: color-mix(in oklch, var(--md-on-surface-variant) var(--state-hover), transparent);
}
.chip[aria-pressed="true"], .chip--on {
  background: var(--md-secondary-container);
  border-color: transparent;
  color: var(--md-on-secondary-container);
}
.chip--tag { min-height: 1.7rem; padding: 0 0.7rem; font-size: var(--type-label-md); border-radius: var(--shape-full); }
.chip .icon { width: 1rem; height: 1rem; }

/* ---------------------------------- cards ------------------------------------ */

.card {
  position: relative;
  border-radius: var(--shape-lg);
  background: var(--md-surface-container-low);
  transition: box-shadow var(--dur-medium) var(--ease-standard),
              transform var(--dur-medium) var(--ease-emphasized),
              background-color var(--dur-medium) var(--ease-standard);
}
.card--elevated { box-shadow: var(--elev-1); }
.card--elevated:hover { box-shadow: var(--elev-3); }
.card--outlined { background: var(--md-surface); border: 1px solid var(--md-outline-variant); }
.card--filled { background: var(--md-surface-container-highest); }

/* ------------------------------- text fields --------------------------------- */

.field { display: grid; gap: 0.35rem; }

.field__label {
  font-size: var(--type-label-lg);
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--md-on-surface-variant);
}

.field__input,
.field textarea, .field input[type="text"], .field input[type="password"],
.field input[type="number"], .field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--md-outline-variant);
  border-radius: var(--shape-md);
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  font-size: var(--type-body-md);
  transition: border-color var(--dur-short) var(--ease-standard),
              background-color var(--dur-short) var(--ease-standard);
}
.field textarea { resize: vertical; line-height: 1.6; }
.field :is(input, textarea, select):hover { border-color: var(--md-outline); }
.field :is(input, textarea, select):focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1.5px var(--md-primary);
}
.field__hint { font-size: var(--type-label-md); color: var(--md-on-surface-variant); }
.field__hint--error { color: var(--md-error); }

/* switch */
.switch {
  position: relative;
  width: 3.25rem; height: 2rem;
  border: 2px solid var(--md-outline);
  border-radius: var(--shape-full);
  background: var(--md-surface-container-highest);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--dur-short) var(--ease-standard), border-color var(--dur-short) var(--ease-standard);
}
.switch::after {
  content: "";
  position: absolute;
  top: 50%; left: 0.25rem;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--md-outline);
  transform: translateY(-50%);
  transition: all var(--dur-medium) var(--ease-spring);
}
.switch[aria-checked="true"] { background: var(--md-primary); border-color: var(--md-primary); }
.switch[aria-checked="true"]::after {
  left: calc(100% - 1.7rem);
  width: 1.45rem; height: 1.45rem;
  background: var(--md-on-primary);
}

/* --------------------------------- dialogs ----------------------------------- */

dialog.sheet {
  margin: auto;
  width: min(92vw, 34rem);
  max-height: min(85dvh, 44rem);
  padding: 0;
  border: none;
  border-radius: var(--shape-xl);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  box-shadow: var(--elev-5);
  overscroll-behavior: contain;
}
dialog.sheet::backdrop {
  background: color-mix(in oklch, var(--md-scrim) 45%, transparent);
  backdrop-filter: blur(4px);
}
dialog.sheet[open] { animation: sheet-in var(--dur-medium) var(--ease-emphasized-decel); }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(2.2rem) scale(0.96); }
}
.sheet__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.4rem 1.5rem 0.6rem;
}
.sheet__title { font-size: var(--type-headline-sm); flex: 1; }
.sheet__body { padding: 0.6rem 1.5rem 1.5rem; display: grid; gap: 1rem; }

/* --------------------------------- snackbar ---------------------------------- */

.snackbar {
  position: fixed;
  left: 50%;
  bottom: max(1.4rem, env(safe-area-inset-bottom));
  z-index: 160;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: min(92vw, 36rem);
  padding: 0.9rem 1.3rem;
  border-radius: var(--shape-md);
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  font-size: var(--type-body-md);
  box-shadow: var(--elev-3);
  transform: translate(-50%, 150%);
  transition: transform var(--dur-medium) var(--ease-spring);
}
.snackbar--show { transform: translate(-50%, 0); }
.snackbar button {
  border: none; background: none;
  color: var(--md-inverse-primary);
  font-weight: 700; cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: var(--shape-xs);
}

/* --------------------------------- tooltip ----------------------------------- */

[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 4px;
  padding: 0.35rem 0.7rem;
  border-radius: var(--shape-sm);
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  font-size: var(--type-label-md);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-standard),
              translate var(--dur-short) var(--ease-emphasized-decel);
  z-index: 90;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; }

/* ------------------------------ skeleton loader ------------------------------- */

.skeleton {
  border-radius: var(--shape-md);
  background: linear-gradient(100deg,
    var(--md-surface-container) 40%,
    var(--md-surface-container-high) 50%,
    var(--md-surface-container) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ============================================================================
   Article content (rendered markdown)
   ========================================================================== */

.md-content {
  font-size: var(--type-body-lg);
  line-height: 1.75;
  color: color-mix(in oklch, var(--md-on-surface) 92%, var(--md-on-surface-variant));
}

.md-content > * + * { margin-top: 1.1em; }

.md-content h2, .md-content h3, .md-content h4 {
  position: relative;
  margin-top: 2.2em;
  scroll-margin-top: calc(var(--appbar-h) + 1.5rem);
}
.md-content h2 { font-size: var(--type-headline-md); }
.md-content h3 { font-size: var(--type-headline-sm); }
.md-content h4 { font-size: var(--type-title-lg); }

.md-content .anchor {
  position: absolute;
  left: -1.4em;
  width: 1.4em;
  color: var(--md-primary);
  opacity: 0;
  font-weight: 400;
  transition: opacity var(--dur-short) var(--ease-standard);
}
.md-content :is(h2, h3, h4):hover .anchor { opacity: 0.7; }
.md-content .anchor:hover { opacity: 1; text-decoration: none; }

.md-content ul, .md-content ol { padding-left: 1.5em; }
.md-content li + li { margin-top: 0.45em; }
.md-content li::marker { color: var(--md-primary); font-weight: 600; }

.md-content hr {
  height: auto;
  margin: 2.6em auto;
  border: none;
  text-align: center;
  letter-spacing: 1.2em;
  color: var(--md-primary);
}
.md-content hr::before { content: "◆ ◆ ◆"; font-size: 0.7rem; }

.md-content blockquote {
  margin: 1.6em 0;
  padding: 0.4rem 1.4rem;
  border-left: 3.5px solid var(--md-primary);
  border-radius: var(--shape-xs) var(--shape-md) var(--shape-md) var(--shape-xs);
  background: color-mix(in oklch, var(--md-primary) 6%, transparent);
  color: var(--md-on-surface-variant);
  font-style: italic;
}
.md-content blockquote p + p { margin-top: 0.8em; }

.md-content a { font-weight: 550; }

.inline-code {
  padding: 0.14em 0.42em;
  border-radius: 0.4em;
  background: var(--md-surface-container-high);
  color: var(--md-tertiary);
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-style: normal;
}

/* code blocks */
.code-block {
  margin: 1.6em 0;
  border-radius: var(--shape-lg);
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  overflow: clip;
}
:root[data-theme="dark"] .code-block { background: oklch(0.135 0.012 265); }

.code-block__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.6rem 0.45rem 1.1rem;
  border-bottom: 1px solid var(--md-outline-variant);
  background: color-mix(in oklch, var(--md-surface-container) 55%, transparent);
}
.code-block__lang {
  font-family: var(--font-mono);
  font-size: var(--type-label-md);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-primary);
}
.code-block__copy {
  border: none;
  background: none;
  padding: 0.3rem 0.7rem;
  border-radius: var(--shape-full);
  color: var(--md-on-surface-variant);
  font-size: var(--type-label-md);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-standard), color var(--dur-short);
}
.code-block__copy:hover { background: color-mix(in oklch, var(--md-on-surface) 8%, transparent); }
.code-block__copy--done { color: var(--md-primary); }

.code-block pre {
  margin: 0;
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.865rem;
  line-height: 1.65;
  tab-size: 2;
}
.code-block code { font-family: inherit; }

/* syntax tokens */
.tok-kw   { color: var(--md-primary); font-weight: 600; }
.tok-str  { color: var(--md-tertiary); }
.tok-num  { color: var(--md-tertiary); font-weight: 550; }
.tok-com  { color: var(--tok-muted); font-style: italic; }
.tok-fn   { color: var(--md-secondary); font-weight: 550; }
.tok-type { color: color-mix(in oklch, var(--md-primary) 70%, var(--md-on-surface)); }
.tok-op   { color: var(--md-on-surface-variant); }
.tok-pun  { color: var(--tok-muted); }
.tok-prop { color: color-mix(in oklch, var(--md-tertiary) 75%, var(--md-on-surface)); }
.tok-tag  { color: var(--md-primary); font-weight: 600; }
.tok-attr { color: var(--md-secondary); }

/* callouts */
.callout {
  --co: var(--md-primary);
  margin: 1.6em 0;
  padding: 1rem 1.3rem;
  border-radius: var(--shape-lg);
  background: color-mix(in oklch, var(--co) 8%, var(--md-surface-container-lowest));
  border: 1px solid color-mix(in oklch, var(--co) 25%, transparent);
}
.callout--warning, .callout--caution { --co: var(--md-error); }
.callout--tip { --co: var(--md-tertiary); }
.callout__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-title-md);
  color: var(--co);
}
.callout__title .m-icon { display: none; }
.callout__title::before {
  content: "◈";
  font-size: 1.05em;
}
.callout--tip .callout__title::before { content: "✦"; }
.callout--important .callout__title::before { content: "★"; }
.callout--warning .callout__title::before { content: "▲"; }
.callout--caution .callout__title::before { content: "⬟"; }
.callout > :last-child { margin-bottom: 0; }
.callout p + p { margin-top: 0.6em; }

/* tables */
.table-wrap { overflow-x: auto; margin: 1.6em 0; border-radius: var(--shape-lg); border: 1px solid var(--md-outline-variant); }
.md-content table { border-collapse: collapse; width: 100%; font-size: var(--type-body-md); }
.md-content th, .md-content td { padding: 0.7rem 1.1rem; text-align: left; }
.md-content th {
  background: var(--md-surface-container);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-label-lg);
  color: var(--md-on-surface);
}
.md-content tbody tr { border-top: 1px solid var(--md-outline-variant); }
.md-content tbody tr:hover { background: color-mix(in oklch, var(--md-primary) 4%, transparent); }

/* task lists */
.md-content li:has(> .task) { list-style: none; }
.task { display: inline-flex; align-items: baseline; gap: 0.6rem; margin-left: -1.5em; }
.task__box {
  flex: none;
  width: 1.05em; height: 1.05em;
  border: 2px solid var(--md-outline);
  border-radius: 0.3em;
  translate: 0 0.14em;
  transition: all var(--dur-short) var(--ease-standard);
}
.task--done .task__box {
  border-color: var(--md-primary);
  background: var(--md-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 84%;
  background-position: center;
  background-repeat: no-repeat;
}
.task--done { color: var(--md-on-surface-variant); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--md-on-surface-variant) 45%, transparent); }

/* figures */
.md-figure { margin: 1.8em 0; }
.md-figure img { border-radius: var(--shape-lg); width: 100%; }
.md-figure figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-size: var(--type-body-sm);
  color: var(--md-on-surface-variant);
}