/* DraftCard LP — additions on top of the Aibex page styles.
 *
 * Page structure (hero order, problem card, features list with the one window
 * that follows, spec tables, FAQ, closing block) comes from the Aibex page:
 * src/DraftCard/index.njk loads /aibex/css/style.css and /aibex/js/features.js
 * as they are, so a change there shows up here too. The miniature window and
 * keycap come from the DraftFinder page (dc-demo-base.css). This file adds only
 * what DraftCard needs: the two-mode cards, the folder tree, and the demos'
 * contents.
 *
 * Demos: CSS only, aria-hidden, base styles are the "after" frame shown under
 * prefers-reduced-motion, loop lengths differ.
 */

/* ---- Page bits ---------------------------------------------------------- */

/* Section titles and the hero's sentence lines wrap only at punctuation,
   spaces and <wbr>, never inside a word — the same rule Aibex gives its
   feature headings. */
.section-title,
.hero-tagline p,
.hero .hero-subtext {
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* keep-all still breaks after a closing bracket; .nb holds 「…」と together. */
.section-title .nb { white-space: nowrap; }

/* Two modes: two cards side by side, same surface as .problem-card. */
.dc-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.dc-mode {
  padding: 2rem;
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.dc-mode h3 { color: var(--primary-blue); margin-bottom: 0.5rem; }
.dc-mode p { margin-bottom: 0; }

.dc-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.dc-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.dc-flow span {
  padding: 0.15rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.dc-flow span + span::before { content: "→ "; color: var(--border-color); }

.loop-note {
  max-width: 680px;
  margin: 2rem auto 0;
  text-align: center;
  color: var(--text-muted);
}

/* Roadmap items in the problem card get a small "予定" mark. */
.dc-plan {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.6rem;
  font-size: 0.75rem;
  color: var(--primary-blue);
  border: 1px solid var(--primary-blue);
  border-radius: 999px;
  vertical-align: 0.15em;
}

.problem-list b { color: var(--text-dark); }

.own-tree {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font: 0.9rem/1.8 "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.own-tree .dim { color: var(--text-muted); }

/* The staged window gets the same lift as Aibex's .ax-win. */
.stage-win .demo-win {
  border-radius: 0.8em;
  box-shadow: 0 2.2em 3.6em -1.4em rgb(20 32 52 / 0.38), 0 0.5em 1.2em rgb(20 32 52 / 0.07);
}

/* The features section sits on white here (Aibex puts it on gray), so the
   phone stage's backing band follows the section colour. */
#features:not(.bg-gray) .features-stage {
  background: var(--bg-light);
  box-shadow: 0 12px 16px -8px var(--bg-light);
}

/* The discovery view holds more than the other windows; a slightly smaller
   type keeps it inside the 16:10 frame. */
.demo--disc .demo-win { font-size: 2.6cqw; }

/* ---- Shared demo pieces ------------------------------------------------- */

/* A card in the list: a small paper chip instead of a file-type chip. */
.dc-ico {
  flex: none;
  width: 0.8em;
  height: 0.95em;
  border-radius: 0.12em;
  background: color-mix(in srgb, var(--secondary-yellow) 14%, white);
  border: 1px solid color-mix(in srgb, var(--secondary-yellow) 45%, var(--border-color));
}

.dc-tag {
  display: inline-block;
  padding: 0.05em 0.55em;
  border: 1px solid var(--primary-blue);
  border-radius: 999px;
  color: var(--primary-blue);
  white-space: nowrap;
}

.dc-tag--ai { border-style: dashed; }

/* Typing: reveal left to right in steps, one per character. */
.dc-type { display: inline-block; white-space: nowrap; }

/* ---- Discovery mode (⌘D) ----------------------------------------------- */

.dc-discview {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  padding: 1.1em 1.4em;
  background: var(--bg-light);
}

.dc-disc-head {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--border-color);
}

.dc-disc-head b { color: var(--primary-blue); }
.dc-disc-head span { color: var(--text-muted); }

/* Two cards drawn at random, side by side. The app picks them; the user types nothing. */
.dc-stims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1em;
  padding: 0 0.4em;
}

.dc-stim {
  padding: 0.9em 1.1em;
  background: color-mix(in srgb, var(--secondary-yellow) 10%, white);
  border: 1px solid color-mix(in srgb, var(--secondary-yellow) 40%, var(--border-color));
  border-radius: 0.4em;
  box-shadow: 0 0.3em 0.9em rgb(0 0 0 / 0.08);
  transform: rotate(-1.2deg);
}

.dc-stim + .dc-stim { transform: rotate(1.4deg); }

.dc-stim small { display: block; color: var(--text-muted); margin-bottom: 0.3em; }
.dc-stim b { display: block; margin-bottom: 0.3em; }

.dc-write {
  flex: 1;
  min-height: 0;
  padding: 0.6em 0.8em;
  border: 1px dashed var(--border-color);
  border-radius: 0.4em;
}

.dc-write .demo-caret { width: 0.08em; background: var(--primary-blue); }

/* 9s: ⌘D opens discovery, two cards are drawn one after the other, a thought is written. */
.demo--disc .dc-discview { animation: dc-disc-view 9s ease-out infinite; }
.demo--disc .dc-stim     { animation: dc-disc-stim 9s ease-out infinite; }
.demo--disc .dc-stim + .dc-stim { animation-name: dc-disc-stim2; }
.demo--disc .dc-ans      { animation: dc-disc-ans 9s steps(20, end) infinite; }
.demo--disc .demo-key    { animation: dc-disc-key 9s linear infinite; }

@keyframes dc-disc-view {
  0%, 13%   { opacity: 0; transform: scale(0.985); }
  17%, 90%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}

@keyframes dc-disc-stim {
  0%, 22%   { opacity: 0; transform: translateY(0.8em) rotate(-4deg) scale(0.96); }
  28%, 100% { opacity: 1; transform: rotate(-1.2deg); }
}

@keyframes dc-disc-stim2 {
  0%, 32%   { opacity: 0; transform: translateY(0.8em) rotate(4deg) scale(0.96); }
  38%, 100% { opacity: 1; transform: rotate(1.4deg); }
}

@keyframes dc-disc-ans {
  0%, 58%   { clip-path: inset(0 100% 0 0); }
  76%, 100% { clip-path: inset(0 0 0 0); }
}

@keyframes dc-disc-key {
  0%, 11.9%, 15.1%, 100% {
    color: var(--text-dark);
    background: var(--bg-light);
    border-color: var(--border-color);
    box-shadow: 0 1cqw 0 var(--border-color), 0 1.6cqw 3cqw rgb(0 0 0 / 0.12);
    transform: none;
  }
  12%, 15% {
    color: var(--bg-light);
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    box-shadow: 0 0.2cqw 0 var(--primary-dark), 0 0.4cqw 1cqw rgb(0 0 0 / 0.12);
    transform: translateY(0.6cqw);
  }
}

/* ---- Save as Markdown (⌘S) ---------------------------------------------- */

.dc-editor {
  flex: 1;
  min-width: 0;
  padding: 0.9em 1em;
}

.dc-editor b { display: block; font-size: 1.15em; margin-bottom: 0.5em; }
.dc-editor p { margin: 0 0 0.7em; font-size: 1em; line-height: 1.5; color: var(--text-dark); }
.dc-editor .dc-tag { margin-right: 0.3em; }

.dc-file {
  position: absolute;
  right: 0.6em;
  bottom: 0.6em;
  left: 0.6em;
  z-index: 2;
  padding: 0.6em 0.8em;
  font: 0.92em/1.5 "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
  overflow: hidden;
  color: var(--text-dark);
  background: var(--bg-gray);
  border: 1px solid var(--border-color);
  border-radius: 0.4em;
  box-shadow: 0 0.3em 0.9em rgb(0 0 0 / 0.1);
}

.dc-file .fm { color: var(--text-muted); }
.dc-file .k  { color: var(--primary-blue); }

/* 7s: ⌘S saves; the same card appears as a plain Markdown file. */
.demo--save .dc-file  { animation: dc-save-file 7s ease-out infinite; }
.demo--save .demo-key { animation: dc-save-key 7s linear infinite; }

@keyframes dc-save-file {
  0%, 19%   { opacity: 0; transform: translateY(1em); }
  25%, 80%  { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: none; }
}

@keyframes dc-save-key {
  0%, 15.9%, 19.1%, 100% {
    color: var(--text-dark);
    background: var(--bg-light);
    border-color: var(--border-color);
    box-shadow: 0 1cqw 0 var(--border-color), 0 1.6cqw 3cqw rgb(0 0 0 / 0.12);
    transform: none;
  }
  16%, 19% {
    color: var(--bg-light);
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    box-shadow: 0 0.2cqw 0 var(--primary-dark), 0 0.4cqw 1cqw rgb(0 0 0 / 0.12);
    transform: translateY(0.8cqw);
  }
}

/* ---- Tag sources -------------------------------------------------------- */

.dc-tagview {
  flex: 1;
  min-width: 0;
  padding: 0.9em 1em;
}

.dc-tagview b { display: block; margin-bottom: 0.4em; }
.dc-tagview p { margin: 0 0 0.8em; font-size: 1em; line-height: 1.5; color: var(--text-muted); }

.dc-tags { display: flex; flex-wrap: wrap; gap: 0.35em; }

/* The AI's suggestion waits under the tags until the user approves it. */
.dc-suggest {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1em;
  color: var(--text-muted);
}

.dc-approve {
  padding: 0.1em 0.7em;
  border: 1px solid var(--primary-blue);
  border-radius: 0.35em;
  color: var(--primary-blue);
  background: var(--bg-light);
}

/* Still frame: the suggestion is dashed and waiting for 承認, which is what the legend explains. */

/* 8s: the suggested tag is dashed; pressing 承認 turns it solid and clears the prompt. */
.demo--tags .dc-tag--ai  { animation: dc-tags-ai 8s linear infinite; }
.demo--tags .dc-suggest  { animation: dc-tags-suggest 8s ease-out infinite; }
.demo--tags .dc-approve  { animation: dc-tags-press 8s linear infinite; }

@keyframes dc-tags-ai {
  0%, 37.9%, 92%, 100% { border-style: dashed; }
  38%, 91.9%           { border-style: solid; }
}

@keyframes dc-tags-suggest {
  0%, 8%    { opacity: 0; }
  14%, 38%  { opacity: 1; }
  44%, 100% { opacity: 0; }
}

@keyframes dc-tags-press {
  0%, 33.9%, 38.1%, 100% { color: var(--primary-blue); background: var(--bg-light); }
  34%, 38%               { color: var(--bg-light); background: var(--primary-blue); }
}

/* ---- Smart folders ------------------------------------------------------ */

.demo--smart .demo-tab { transition: none; }
.demo--smart .demo-row { overflow: hidden; }
.demo--smart .demo-row.is-out { height: 0; opacity: 0; }

/* Still frame: the saved folder is selected. */
.dc-tab-smart { color: var(--text-dark); background: var(--bg-light); box-shadow: 0 0 0 1px var(--border-color); }

/* 7.5s: picking the saved folder narrows the list to its cards. */
.demo--smart .dc-tab-all   { animation: dc-smart-all 7.5s linear infinite; }
.demo--smart .dc-tab-smart { animation: dc-smart-tab 7.5s linear infinite; }
.demo--smart .demo-row.is-out { animation: dc-smart-out 7.5s ease-in-out infinite; }

@keyframes dc-smart-all {
  0%, 24%, 90%, 100% { color: var(--text-dark); background: var(--bg-light); box-shadow: 0 0 0 1px var(--border-color); }
  25%, 89%           { color: var(--text-muted); background: transparent; box-shadow: none; }
}

@keyframes dc-smart-tab {
  0%, 24%, 90%, 100% { color: var(--text-muted); background: transparent; box-shadow: none; }
  25%, 89%           { color: var(--text-dark); background: var(--bg-light); box-shadow: 0 0 0 1px var(--border-color); }
}

@keyframes dc-smart-out {
  0%, 25%   { height: var(--row); opacity: 1; }
  31%, 86%  { height: 0; opacity: 0; }
  93%, 100% { height: var(--row); opacity: 1; }
}

/* ---- Import (⌘⇧I) ------------------------------------------------------- */

.demo--import .demo-row { overflow: hidden; }

.dc-progress {
  position: absolute;
  right: 12%;
  bottom: 0.8em;
  left: 12%;
  z-index: 2;
  padding: 0.5em 0.8em;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 0.5em;
  box-shadow: 0 0.3em 0.9em rgb(0 0 0 / 0.1);
}

.dc-progress span { display: block; margin-bottom: 0.35em; color: var(--text-muted); }

.dc-progress i {
  display: block;
  height: 0.35em;
  border-radius: 999px;
  background: linear-gradient(var(--primary-blue), var(--primary-blue)) 0 0 / 100% 100% no-repeat, var(--bg-gray-dark);
}

/* 8s: ⌘⇧I starts the import, the bar fills, the new cards join the list. */
.demo--import .dc-new       { animation: dc-import-row 8s ease-in-out infinite; }
.demo--import .dc-progress  { animation: dc-import-box 8s ease-out infinite; }
.demo--import .dc-progress i { animation: dc-import-bar 8s linear infinite; }
.demo--import .demo-key     { animation: dc-import-key 8s linear infinite; }

@keyframes dc-import-row {
  0%, 46%   { height: 0; opacity: 0; }
  52%, 88%  { height: var(--row); opacity: 1; }
  95%, 100% { height: 0; opacity: 0; }
}

@keyframes dc-import-box {
  0%, 14%   { opacity: 0; transform: translateY(0.6em); }
  18%, 58%  { opacity: 1; transform: none; }
  64%, 100% { opacity: 0; transform: none; }
}

@keyframes dc-import-bar {
  0%, 18%   { background-size: 0% 100%, auto; }
  52%, 100% { background-size: 100% 100%, auto; }
}

@keyframes dc-import-key {
  0%, 11.9%, 15.1%, 100% {
    color: var(--text-dark);
    background: var(--bg-light);
    border-color: var(--border-color);
    box-shadow: 0 1cqw 0 var(--border-color), 0 1.6cqw 3cqw rgb(0 0 0 / 0.12);
    transform: none;
  }
  12%, 15% {
    color: var(--bg-light);
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    box-shadow: 0 0.2cqw 0 var(--primary-dark), 0 0.4cqw 1cqw rgb(0 0 0 / 0.12);
    transform: translateY(0.8cqw);
  }
}

/* ---- Shortcut pane (⌘.) ------------------------------------------------- */

.dc-help {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 46%;
  padding: 0.8em 0.9em;
  background: var(--bg-light);
  border-left: 1px solid var(--border-color);
  box-shadow: -0.3em 0 0.9em rgb(0 0 0 / 0.08);
}

.dc-help b { display: block; margin-bottom: 0.6em; }

.dc-help div {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.3em 0;
  white-space: nowrap;
  border-bottom: 1px solid var(--bg-gray-dark);
}

.dc-help kbd { font: inherit; color: var(--text-muted); }

/* 6.5s: ⌘. slides the list of shortcuts in from the right. */
.demo--help .dc-help  { animation: dc-help-pane 6.5s ease-out infinite; }
.demo--help .demo-key { animation: dc-help-key 6.5s linear infinite; }

@keyframes dc-help-pane {
  0%, 17%   { opacity: 0; transform: translateX(30%); }
  23%, 80%  { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: none; }
}

@keyframes dc-help-key {
  0%, 13.9%, 17.1%, 100% {
    color: var(--text-dark);
    background: var(--bg-light);
    border-color: var(--border-color);
    box-shadow: 0 1cqw 0 var(--border-color), 0 1.6cqw 3cqw rgb(0 0 0 / 0.12);
    transform: none;
  }
  14%, 17% {
    color: var(--bg-light);
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    box-shadow: 0 0.2cqw 0 var(--primary-dark), 0 0.4cqw 1cqw rgb(0 0 0 / 0.12);
    transform: translateY(0.8cqw);
  }
}

/* ---- Layout ------------------------------------------------------------- */

@media (max-width: 768px) {
  .dc-modes { grid-template-columns: minmax(0, 1fr); }
}