/* Interactive bits built by demo/slash-demo.ts and demo/tiles.ts:
   the slash-command playground (#slash) and the two live bento tiles. */

/* =====================================================================
   Slash playground
   ===================================================================== */
#slash .slash-demo { --ease: cubic-bezier(.2, .8, .2, 1); position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }

#slash .sd-window {
	position: relative; text-align: left;
	background: var(--background-primary); border-radius: 16px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 8px rgba(255, 255, 255, .04), 0 50px 110px -40px rgba(255, 106, 31, .5), 0 30px 60px -30px rgba(0, 0, 0, .7);
}
#slash .sd-tabs { display: flex; align-items: flex-end; gap: 6px; height: 40px; padding: 0 12px; background: #ececec; border-bottom: 1px solid var(--background-modifier-border); border-radius: 16px 16px 0 0; }
#slash .sd-tabs .obs-dots { align-self: center; margin-right: 8px; }
#slash .sd-tab { display: flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 8px 8px 0 0; background: var(--background-primary); font-size: 13px; color: var(--text-normal); }

#slash .sd-scroll {
	position: relative; height: clamp(360px, 52svh, 520px);
	overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: 0 0 16px 16px;
}
#slash .sd-note { max-width: 660px; margin: 0 auto; padding: 10px 32px 28px; }
#slash .sd-note h1 { font: 700 28px/1.2 var(--font-text); letter-spacing: -.015em; margin: 14px 0 14px; color: var(--text-normal); }
#slash .sd-note p { margin: 0 0 10px; color: var(--text-normal); font-size: 15px; }

/* The line you type on */
#slash .sd-line { position: relative; display: flex; align-items: center; min-height: 34px; margin-top: 4px; }
#slash .sd-input {
	appearance: none; display: inline; align-items: normal; gap: normal; cursor: inherit; text-decoration: none; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; letter-spacing: inherit; text-align: inherit;
	box-sizing: border-box; width: 100%; padding: 4px 0 4px 6px;
	font: 16px/1.5 var(--font-text); color: var(--text-normal); caret-color: var(--interactive-accent);
}
#slash .sd-input::placeholder { color: var(--text-faint); }
#slash .sd-caret { position: absolute; left: 1px; top: 50%; width: 2px; height: 1.25em; translate: 0 -50%; border-radius: 1px; background: var(--interactive-accent); animation: sd-blink 1.05s steps(1) infinite; pointer-events: none; }
#slash .sd-input:focus ~ .sd-caret,
#slash .sd-input:not(:placeholder-shown) ~ .sd-caret { display: none; }
@keyframes sd-blink { 50% { opacity: 0; } }

/* The suggest popup, as Obsidian draws it */
#slash .sd-menu {
	position: absolute; z-index: 20; overflow: hidden;
	background: var(--background-primary); border: 1px solid var(--background-modifier-border); border-radius: 10px;
	box-shadow: var(--shadow-l), 0 18px 50px -18px rgba(255, 106, 31, .45);
	font: 14px/1.4 var(--font-text); color: var(--text-normal);
	transform-origin: top left; animation: sd-menu-in .3s var(--ease);
}
#slash .sd-menu.is-above { transform-origin: bottom left; }
#slash .sd-menu[hidden] { display: none; }
@keyframes sd-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
#slash .sd-menu.is-above { animation-name: sd-menu-up; }
@keyframes sd-menu-up { from { opacity: 0; transform: translateY(6px) scale(.98); } }
#slash .suggestion { max-height: min(300px, 46vh); overflow-y: auto; padding: 4px; scrollbar-width: thin; }
#slash .suggestion-item { padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background .15s; }
#slash .suggestion-item.is-selected { background: rgba(242, 98, 26, .1); }
#slash .suggestion-item.is-selected .nimble-slash-title { color: #b8440c; }
#slash .suggestion-item.is-inert { cursor: default; }
#slash .suggestion-item.is-inert.is-selected { background: var(--background-modifier-hover); }
#slash .nimble-slash-detail { font-size: 12px; }
#slash .nimble-slash-badge { white-space: nowrap; }
#slash .prompt-instructions { display: flex; gap: 14px; padding: 7px 12px; border-top: 1px solid var(--background-modifier-border); font-size: 12px; color: var(--text-muted); }
#slash .prompt-instruction-command { font-weight: 600; margin-right: 5px; color: var(--text-normal); }
@media (pointer: coarse) { #slash .prompt-instructions { display: none; } }

/* What the commands write: the Markdown first, then the plugin's render */
#slash .sd-block { margin: 12px 0; animation: sd-block-in .4s var(--ease); }
@keyframes sd-block-in { from { opacity: 0; transform: translateY(6px); } }
#slash .sd-src, #slash .sd-out { display: grid; transition: grid-template-rows .45s var(--ease), opacity .35s var(--ease); }
#slash .sd-src { grid-template-rows: 1fr; }
#slash .sd-out { grid-template-rows: 0fr; opacity: 0; }
#slash .sd-block.is-rendered .sd-src { grid-template-rows: 0fr; opacity: 0; }
#slash .sd-block.is-rendered .sd-out { grid-template-rows: 1fr; opacity: 1; }
#slash .sd-src-inner, #slash .sd-out-inner { min-height: 0; overflow: hidden; }
#slash .sd-out-inner { padding: 2px; }
#slash .sd-src pre {
	margin: 0; padding: 10px 14px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere;
	background: #f7f5fa; box-shadow: inset 0 0 0 1px #ece8f1, inset 3px 0 0 var(--interactive-accent);
	font: 13px/1.55 var(--font-monospace); color: #3a3442;
}
#slash .sd-src code { font: inherit; background: none; padding: 0; }
#slash .sd-fence { color: #c2410c; }
#slash .sd-yaml-key { color: #7c5ce0; }
#slash .sd-out .nimble-box, #slash .sd-out .nimble-encounter-block { margin: 0; }
#slash .sd-out .nimble-box-body p { margin: 0 0 4px; font-size: inherit; }
#slash .sd-out .nimble-box-body p:last-child { margin: 0; }
#slash .sd-out .nimble-inline-name { cursor: default; }
#slash .sd-out .nimble-inline-ref { top: 0; }
#slash .sd-roll-line { margin: 0; }
#slash .sd-text { margin: 12px 0; }

/* Roll notices, top right of the window */
#slash .sd-notices { position: absolute; top: 50px; right: 12px; z-index: 15; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
#slash .sd-notices .notice {
	min-width: 150px; max-width: 280px; padding: 10px 16px; border-radius: 10px;
	background: rgba(28, 25, 34, .95); color: #fff; font: 14px/1.4 var(--font-text);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 140, 70, .35), 0 12px 34px -10px rgba(255, 106, 31, .55);
	animation: sd-notice-in .35s var(--ease); transition: opacity .3s, translate .3s;
}
#slash .sd-notices .notice.is-leaving { opacity: 0; translate: 12px 0; }
@keyframes sd-notice-in { from { opacity: 0; translate: 0 -8px; scale: .96; } }

/* Under the window: a "/" key for touch, a hint, and Reset */
#slash .sd-bar { display: flex; align-items: center; gap: 14px; margin-top: 22px; font: 14px/1.4 var(--sans); color: var(--muted-dark); }
#slash .sd-key {
	appearance: none; align-items: normal; gap: normal; text-decoration: none; margin: 0; padding: 0; border: 0; outline: none; letter-spacing: inherit; line-height: inherit; text-align: inherit; text-transform: inherit; justify-content: normal; min-height: auto;
	box-sizing: border-box; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
	font: 600 italic 24px/1 var(--serif); color: #fff;
	background: linear-gradient(180deg, #ff8c42 0%, var(--ember) 45%, var(--ember-deep) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(120, 30, 0, .3), 0 10px 28px -8px var(--glow);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
	animation: sd-key-glow 2.6s ease-in-out infinite;
}
#slash .sd-key:hover { transform: translateY(-2px); }
#slash .sd-key:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(120, 30, 0, .3), 0 4px 14px -6px var(--glow); }
#slash .sd-key:focus-visible { outline: 2px solid var(--ember-soft); outline-offset: 3px; }
@keyframes sd-key-glow { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(120, 30, 0, .3), 0 0 0 6px rgba(255, 106, 31, .14), 0 10px 32px -6px rgba(255, 106, 31, .6); } }
#slash .sd-hint { flex: 1; min-width: 0; }
#slash .sd-hint code { font: 13px var(--font-monospace, ui-monospace, monospace); color: #ffd7b5; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
#slash .sd-reset { appearance: none; width: auto; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; text-transform: inherit; justify-content: normal; height: auto; min-height: auto; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; cursor: pointer; color: var(--ember-soft); font-weight: 600; text-decoration: none; text-underline-offset: 4px; transition: color .3s var(--ease); }
#slash .sd-reset:hover, #slash .sd-reset:focus-visible { color: #fff; text-decoration: underline; }
#slash .sd-reset:focus-visible { outline: 2px solid var(--ember-soft); outline-offset: 2px; border-radius: 4px; }
#slash .sd-reset-icon { display: inline-flex; }
#slash .sd-reset-icon svg { width: 14px; height: 14px; }

@media (max-width: 600px) {
	#slash .sd-note { padding: 4px 16px 20px; }
	#slash .sd-note h1 { font-size: 23px; margin-top: 10px; }
	#slash .sd-tabs .obs-dots { display: none; }
	#slash .sd-scroll { height: clamp(360px, 62svh, 500px); }
	#slash .sd-bar { flex-wrap: wrap; gap: 10px 14px; margin-top: 18px; }
	#slash .sd-hint { order: 3; flex-basis: 100%; font-size: 13px; line-height: 1.9; }
	#slash .sd-reset { margin-left: auto; }
	#slash .sd-notices { left: 12px; justify-items: stretch; }
	#slash .sd-notices .notice { max-width: none; }
}

/* =====================================================================
   Bento tile: read-aloud boxes
   ===================================================================== */
#tile-boxes-demo { --ease: cubic-bezier(.2, .8, .2, 1); margin-top: 20px; font-size: 14px; }
#tile-boxes-demo .tb-stack { display: grid; gap: 6px; }
#tile-boxes-demo .nimble-box {
	margin: 0; border-radius: 9px;
	transition: transform .4s var(--ease), box-shadow .4s var(--ease), opacity .4s var(--ease), filter .4s var(--ease);
}
#tile-boxes-demo .nimble-box.is-folded { opacity: .8; filter: saturate(.75); }
#tile-boxes-demo .nimble-box.is-folded:hover { opacity: 1; filter: none; transform: translateX(3px); }
#tile-boxes-demo .nimble-box:not(.is-folded) {
	transform: scale(1.025); z-index: 1;
	box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--box-color) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--box-color) 25%, transparent);
}
#tile-boxes-demo .nimble-box-head { cursor: pointer; padding: .35rem .6rem .35rem .45rem; border-radius: 8px; }
#tile-boxes-demo .nimble-box-head:focus-visible { outline: 2px solid var(--box-color); outline-offset: -2px; }
#tile-boxes-demo .nimble-box-icon { width: 1.65rem; height: 1.65rem; border-radius: 7px; }
#tile-boxes-demo .nimble-box-icon svg { width: 15px; height: 15px; }
#tile-boxes-demo .nimble-box-title { font-size: .7rem; }
#tile-boxes-demo .nimble-box-chevron { transition: transform .4s var(--ease); }
/* Animate the fold (the plugin just hides the body). */
#tile-boxes-demo .nimble-box .nimble-box-body,
#tile-boxes-demo .nimble-box.is-folded .nimble-box-body {
	display: block; overflow: hidden; max-height: 7em; padding: 0 .9rem .6rem .95rem;
	transition: max-height .45s var(--ease), opacity .35s var(--ease), padding .45s var(--ease);
}
#tile-boxes-demo .nimble-box.is-folded .nimble-box-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
#tile-boxes-demo .nimble-box-body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-normal); }
#tile-boxes-demo .box-style-parchment .nimble-box-body p { color: var(--ink); }
#tile-boxes-demo .box-read-aloud .nimble-box-body p { font-size: 15px; }

/* =====================================================================
   Bento tile: dice, two ways
   ===================================================================== */
#tile-dice-demo { --ease: cubic-bezier(.2, .8, .2, 1); margin-top: 20px; }
#tile-dice-demo .td-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
#tile-dice-demo .td-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px;
	border: 1px solid transparent; border-radius: 999px; cursor: pointer;
	font: 650 15px/1.1 var(--sans);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
#tile-dice-demo .td-btn-icon { display: inline-flex; }
#tile-dice-demo .td-btn-icon svg { width: 16px; height: 16px; }
#tile-dice-demo .td-btn-ember {
	color: #fff; background: linear-gradient(180deg, #ff8c42 0%, var(--ember) 45%, var(--ember-deep) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(120, 30, 0, .25), 0 10px 28px -8px var(--glow);
}
#tile-dice-demo .td-btn-ember:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(120, 30, 0, .25), 0 16px 36px -8px rgba(255, 106, 31, .55); }
#tile-dice-demo .td-btn-quiet { color: var(--ink); background: #fff; border-color: var(--ash-2); box-shadow: 0 6px 18px -10px rgba(40, 20, 10, .3); }
#tile-dice-demo .td-btn-quiet:hover:not(:disabled) { transform: translateY(-2px); border-color: #ffc59e; box-shadow: 0 12px 26px -12px rgba(255, 106, 31, .45); }
#tile-dice-demo .td-btn:active:not(:disabled) { transform: translateY(0); }
#tile-dice-demo .td-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
#tile-dice-demo .td-btn:disabled { opacity: .6; cursor: progress; }

#tile-dice-demo .td-result { margin-top: 14px; min-height: 92px; }
#tile-dice-demo .td-card {
	position: relative; padding: 12px 16px; border-radius: 14px;
	background: radial-gradient(120% 140% at 100% 0%, rgba(255, 106, 31, .28), transparent 55%), rgba(28, 25, 34, .96);
	color: #fff; font: 14px/1.4 var(--sans);
	box-shadow: 0 0 0 1px rgba(255, 140, 70, .3), 0 16px 34px -14px rgba(255, 106, 31, .6);
	animation: td-pop .5s cubic-bezier(.2, .8, .2, 1.25);
}
#tile-dice-demo .nimble-roll-notice-total { font-size: 2.2em; color: #fff; text-shadow: 0 0 22px rgba(255, 140, 60, .65); }
#tile-dice-demo .td-note { margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, .7); }
@keyframes td-pop { 0% { opacity: 0; transform: scale(.86) translateY(6px); } 60% { opacity: 1; } 100% { transform: none; } }

#tile-dice-demo .td-card.is-idle {
	display: flex; align-items: center; gap: 14px; min-height: 92px;
	background: #fbf8f4; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--ash-2);
	border: 0; animation: none;
}
#tile-dice-demo .td-idle-dice { font: 640 26px/1 var(--serif); color: var(--ember-deep); }
#tile-dice-demo .td-idle-text { font-size: 14px; }
#tile-dice-demo .td-card.is-rolling { box-shadow: inset 0 0 0 1.5px #ffc59e, 0 10px 28px -14px rgba(255, 106, 31, .5); }
#tile-dice-demo .td-card.is-rolling .td-idle-dice { animation: td-wobble .7s ease-in-out infinite; }
@keyframes td-wobble { 25% { transform: rotate(-8deg) translateY(-2px); } 75% { transform: rotate(8deg) translateY(-2px); } }

/* =====================================================================
   Less motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	/* style.css turns off every animation and transition; this only stops the boxes' hover lift. */
	#tile-boxes-demo .nimble-box:not(.is-folded), #tile-boxes-demo .nimble-box.is-folded:hover { transform: none; }
}


/* Callouts card: one at a time in a fixed slot, crossfading; tabs below. */
#tile-boxes-demo .tb-stage { display: grid; }
#tile-boxes-demo .tb-stage > .nimble-box { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); filter: none;
	transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s; }
#tile-boxes-demo .tb-stage > .nimble-box.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s; }
#tile-boxes-demo .tb-stage .nimble-box-head { cursor: default; }
#tile-boxes-demo .tb-stage .nimble-box-body { max-height: none; opacity: 1; }
#tile-boxes-demo .tb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
#tile-boxes-demo .tb-tab { appearance: none; display: inline; align-items: normal; gap: normal; width: auto; box-sizing: content-box; text-decoration: none; margin: 0; box-shadow: none; outline: none; letter-spacing: inherit; line-height: inherit; text-align: inherit; text-transform: inherit; justify-content: normal; height: auto; min-height: auto; cursor: pointer; padding: 5px 11px; border-radius: 999px; font: 600 12px/1.2 var(--sans, sans-serif); color: #6a6170;
	background: color-mix(in srgb, var(--box-color, #888) 9%, #fff); border: 1px solid color-mix(in srgb, var(--box-color, #888) 22%, transparent); transition: background .3s, color .3s, border-color .3s; }
#tile-boxes-demo .tb-tab:hover { color: #1e1922; }
#tile-boxes-demo .tb-tab.is-active { color: #fff; background: var(--box-color, #888); border-color: var(--box-color, #888); }
#tile-boxes-demo .tb-tab:focus-visible { outline: 2px solid var(--box-color, #888); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #tile-boxes-demo .tb-stage > .nimble-box { transition: none; } }