/* Flutter-inspired Material surfaces and the official Dash mascot. */
:root{--bg:#f8fbff;--text:#042b59;--accent:#0553b1;--accent-soft:#e0f2ff;--line:#dce8f5;--muted:#526c87;--surface-2:#eaf4ff}
body{font-family:'Avenir Next','Hiragino Sans','Yu Gothic',sans-serif}
.site-header{background:#ffffffed;backdrop-filter:blur(16px);border-bottom-color:#e3eef9}.brand-mark{background:#e0f2ff;color:#027dfd;border-radius:12px;font-size:29px}.header-nav a[aria-current]{box-shadow:none;background:#e0f2ff;border-radius:24px;padding:9px 17px}.header-nav a{padding:9px 14px}.header-nav{gap:8px}.site-header .wrap{height:84px}.header-search input{border-radius:28px;background:#f1f7ff;border-color:transparent}
.catalog-shell{gap:32px}.catalog-sidebar{border-right:0;top:84px}.category-filter{border-radius:28px;padding:13px 14px;margin-bottom:8px}.category-filter.active{color:#044d9c;background:#d6edff}.category-filter.active small{color:#0553b1}.category-filter>span{color:#027dfd}.catalog-main{padding-top:24px}
.hero{position:relative;isolation:isolate;grid-template-columns:1.05fr 1fr;background:#e3f4ff;border-radius:32px;padding:40px 34px;min-height:345px;overflow:hidden;margin-bottom:32px;gap:0}.hero:after{content:'';position:absolute;z-index:-1;background:#c9edff;width:390px;height:390px;border-radius:50%;right:-100px;top:-90px}.hero h1{font-size:clamp(30px,3.05vw,45px);line-height:1.48;font-weight:800;color:#042b59;letter-spacing:-1.6px}.hero-copy{position:relative;z-index:2}.hero-copy>p{font-size:13px;line-height:1.95;color:#426785}.hero-link{display:inline-flex;align-items:center;gap:20px;background:#0553b1;color:white;border-radius:28px;padding:12px 22px;margin-top:14px;font-size:12px;box-shadow:0 4px 0 #042b5910}.hero-link:hover{background:#042b59}
.dash-stage{position:relative;align-self:stretch;min-height:260px;display:flex;align-items:flex-end;justify-content:center}.dash-image{height:auto;width:130%;max-width:none;position:absolute;left:-15%;bottom:-5px;pointer-events:none;z-index:1}.dash-speech{position:absolute;right:2px;top:0;z-index:2;padding:12px 18px;background:#fff;border-radius:20px 20px 20px 3px;color:#0553b1;font-size:12px;font-weight:700;box-shadow:0 5px 0 #0553b10a;transform:rotate(5deg)}.dash-widget{position:absolute;border:1px solid #fff;background:#ffffffd9;box-shadow:0 8px 24px #0553b10a;border-radius:15px;padding:9px 13px;z-index:2;font-size:11px;font-weight:600;color:#0553b1}.dash-widget-a{left:-5px;top:52px;transform:rotate(-9deg)}.dash-widget-b{right:-13px;bottom:22px;transform:rotate(8deg);background:#fff8c7;color:#665308}.dash-widget-a span{display:inline-block;background:#1cdac5;width:25px;height:14px;border-radius:12px;vertical-align:middle;margin-right:6px}.dash-widget-a span:after{content:'';display:block;width:10px;height:10px;border-radius:50%;background:#fff;margin:2px 0 0 13px}
.sidebar-note{background:#eaf5ff;border:0;border-radius:20px;padding:18px;margin:30px 0 20px}.sidebar-note strong{color:#0553b1}.note-symbol{display:none}.sidebar-note p{margin-bottom:0}.library{border:0;padding-top:0}.library-heading h2{font-size:23px;font-weight:800}.library-heading p{font-size:12px}.secondary-button,.clear-button{border-radius:24px;padding:9px 15px;background:#fff}.search-box{border-radius:28px;border:1px solid #c9dff5;background:#fff;padding:0 18px}.search-box input{height:52px;font-size:13px}.search-box>span{color:#027dfd}.motion-filters{margin:20px 0 26px;gap:8px}.motion-filters button{border:0;background:#eaf2fc;padding:8px 16px;font-size:12px}.motion-filters button.active{background:#0553b1}.motion-filters>span{font-size:12px}
.cards{gap:20px}.card{border:1px solid #e0eaf5;border-radius:22px;box-shadow:none}.card:hover{border-color:#5bbaff;box-shadow:0 6px 20px #0553b108}.card-preview-link{border-bottom:0}.card-media{height:235px;background:#e2f3ff}.card:nth-child(4n+2) .card-media{background:#e0f7f1}.card:nth-child(4n+3) .card-media{background:#eee7ff}.card:nth-child(4n+4) .card-media{background:#fff5ce}.card-media video{height:205px;border-radius:12px;box-shadow:0 6px 12px #042b590c}.preview-open{border:0;border-radius:20px;padding:5px 11px;bottom:12px;right:12px;font-weight:600}.card-body{padding:18px 18px 13px}.card-cat{color:#0553b1}.card-name{font-size:16px}.card-bottom{border-top-color:#e7f0f8}.preview-toggle{border:0;border-radius:50%;background:#e9f4ff;color:#0553b1;width:30px;height:30px}.card-summary{font-size:12px}.site-footer{font-size:11px}.asset-credit{display:block;margin-top:6px;font-size:10px;color:#6a8097}.asset-credit a{color:inherit}
@media(max-width:1150px){.hero{padding:30px 24px;min-height:315px}.hero h1{font-size:32px}.dash-image{width:155%;left:-27%;bottom:-4px}.dash-widget{font-size:10px;padding:7px 10px}.dash-widget-a{left:-15px}.dash-speech{font-size:10px;padding:10px 12px}.dash-widget-b{right:-7px}}
@media(max-width:760px){.site-header .wrap{height:68px}.header-nav{gap:2px}.header-nav a,.header-nav a[aria-current]{padding:7px 9px;font-size:10px}.catalog-sidebar{padding:14px 0}.category-filter{margin:0;padding:8px 13px}.hero{margin:6px 0 26px;padding:26px 22px;grid-template-columns:1.1fr .9fr;min-height:280px;border-radius:26px}.hero h1{font-size:29px;letter-spacing:-1.2px}.hero-copy>p{font-size:11px}.hero-link{font-size:11px;padding:10px 16px;margin-top:9px}.dash-stage{min-height:200px}.dash-image{width:200%;left:-50%;bottom:0}.dash-speech{right:-5px;top:7px;font-size:9px;padding:9px 11px}.dash-widget-a{top:69px;left:-10px;font-size:9px;padding:6px 9px}.dash-widget-b{bottom:3px;right:-6px;font-size:9px}.library-heading h2{font-size:18px}.library-heading p{font-size:10px}.secondary-button{font-size:10px;padding:8px 10px}.search-box input{font-size:11px}.motion-filters button{font-size:10px;padding:7px 12px}.card-media{height:205px}.card-media video{height:180px}.card-name{font-size:14px}.card-summary{font-size:11px}.card-body{padding:14px}.card{border-radius:18px}}
@media(max-width:480px){.hero{display:block;padding:26px 22px 0;min-height:0}.hero h1{font-size:32px}.hero-copy>p{font-size:12px}.hero h1 br{display:none}.dash-stage{height:220px;margin-top:8px;max-width:340px;margin-left:auto;margin-right:auto}.dash-image{width:145%;left:-22%;bottom:-24px}.dash-speech{right:0;top:10px;font-size:11px}.dash-widget-a{left:0;top:80px;font-size:10px}.dash-widget-b{bottom:26px;right:2px;font-size:10px}.hero:after{top:auto;bottom:-170px;right:-120px;width:420px;height:420px}.cards{grid-template-columns:1fr}.card-media{height:250px}.card-media video{height:224px}.card-body{min-height:165px}.header-nav a:first-child{display:none}.search-box{padding:0 11px}.clear-button{padding:7px 10px;font-size:10px}}

/* ── スマホでもメニューを3つとも出す（2026-11-12）。代わりにロゴは記号だけにする（名前は読み上げ用に残す） */
@media (max-width: 480px) {
  .header-nav a:first-child { display: block; }
  .header-nav { gap: 2px; }
  .header-nav a { padding: 8px 10px; }
  .header-nav a[aria-current] { padding: 8px 12px; }
  .logo > span:not(.brand-mark) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 360px) {
  .header-nav a, .header-nav a[aria-current] { padding: 6px 7px; white-space: nowrap; font-size: 10.5px; }
}

/* ── ヘッダーのロゴに Dash を小さく（トップの大きなヒーローは外した。2026-11-12） */
.brand-mark { overflow: hidden; padding: 0; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; transform: translateY(2px); transition: transform 0.25s ease; }
.logo:hover .brand-mark img { transform: translateY(0) rotate(-8deg); }
@media (prefers-reduced-motion: reduce) { .brand-mark img { transition: none; } .logo:hover .brand-mark img { transform: translateY(2px); } }

/* ── 「動きから」のタグ: 件数を控えめに。スマホでは横1列でスクロール（2026-11-12） */
.motion-filters button small { opacity: 0.6; font-size: 0.9em; margin-left: 2px; }
@media (max-width: 760px) {
  .motion-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -18px; margin-right: -18px; padding: 0 18px; }
  .motion-filters::-webkit-scrollbar { display: none; }
  .motion-filters > * { flex: none; }
}

/* ── 絞り込みボタン: スクロールしたら横に出す。条件ありなら赤いポチ。押すと小窓で変えられる（2026-11-12） */
.filter-sentinel { height: 0; }
.category-select { display: none; }
.filter-fab {
  position: fixed; right: 20px; bottom: 24px; z-index: 20;
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: #0553b1; color: #fff; box-shadow: 0 6px 18px #042b5940;
}
.filter-fab:hover { background: #042b59; }
.filter-dot { display: none; position: absolute; top: 9px; right: 9px; width: 11px; height: 11px; border-radius: 50%; background: #e5484d; border: 2px solid #0553b1; }
.filter-fab.has-filters .filter-dot { display: block; }
.filter-dialog {
  border: 0; padding: 0; border-radius: 24px; width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 680px);
  background: var(--bg); color: var(--text); box-shadow: 0 20px 50px #042b5940;
}
.filter-dialog::backdrop { background: #042b5966; }
.filter-dialog[open] { display: flex; flex-direction: column; }
.filter-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.filter-dialog-head h2 { font-size: 16px; margin: 0; }
.filter-dialog-close { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); padding: 4px 8px; }
.filter-dialog-body { overflow-y: auto; padding: 12px 20px; }
.filter-done { margin: 0 20px 20px; border: 0; border-radius: 28px; padding: 12px; background: #0553b1; color: #fff; font-weight: 700; }
/* 小窓の中では、カテゴリの選択欄を出し、タグは折り返して全部見せる */
.filter-bar.in-dialog .category-select { display: block; font: inherit; font-size: 13px; color: var(--text); background: #fff; border: 1px solid #c9dff5; border-radius: 26px; padding: 0 12px; min-width: 0; flex: 0 1 170px; }
.filter-bar.in-dialog .search-row { flex-wrap: wrap; }
.filter-bar.in-dialog .search-box { flex: 1 1 260px; }
.filter-bar.in-dialog .search-box kbd { display: none; }
.filter-bar.in-dialog .motion-filters { flex-wrap: wrap; overflow: visible; margin: 16px 0 4px; padding: 0; }
@media (max-width: 760px) {
  .filter-fab { right: 16px; bottom: 20px; }
  .filter-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 85vh; }
  .filter-bar.in-dialog .category-select { flex: 1 1 100%; height: 42px; order: 3; }
}

/* ── 絞り込み中は、ボタンを白い横長にして「絞り込み中・◯件」と出す（色だけに頼らない。2026-11-12） */
.filter-fab-label { display: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.filter-fab.has-filters {
  width: auto; height: 48px; padding: 0 18px 0 14px; border-radius: 26px;
  display: flex; align-items: center; gap: 8px;
  background: #fff; color: #0553b1; border: 2px solid #0553b1;
}
.filter-fab.has-filters:hover { background: #e0f2ff; }
.filter-fab.has-filters .filter-fab-label { display: inline; }
.filter-fab.has-filters .filter-dot { top: 8px; right: auto; left: 28px; border-color: #fff; }

/* ── 左のサイドメニュー: 画面より長いときは、メニューの中だけでスクロールできるように（2026-11-12） */
@media (min-width: 761px) {
  .catalog-sidebar {
    height: calc(100vh - 84px); height: calc(100dvh - 84px);
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c9dff5 transparent;
  }
}

/* ── このサイトについて（2026-11-12） */
.footer-about { margin-right: 16px; color: var(--muted); }
.about h2 { margin-top: 36px; }
.about ul { padding-left: 1.2em; font-size: 14px; }
.about li { margin: 6px 0; }
.about .meta { margin: 12px 0; }

/* ── 「動きから」: 最初は8グループだけ。「もっと見る」で残り、「すべての動き」で当初の一覧を小窓に（2026-11-12） */
.motion-filters.is-collapsed .motion-extra:not(.active) { display: none; }
.motion-filters .motion-more, .motion-filters .motion-all { background: none; border: 1px dashed #9cc3ea; color: #0553b1; }
.motion-filters .motion-all { border-style: solid; }
.motion-filters .motion-phrase { background: #0553b1; color: #fff; }
/* 絞り込みの小窓の中では、グループを全部見せる */
.filter-bar.in-dialog .motion-filters .motion-extra { display: inline-block; }
.filter-bar.in-dialog .motion-filters .motion-more { display: none; }
/* すべての動きの小窓 */
.motion-dialog .motion-search { margin-bottom: 12px; }
.motion-dialog .motion-search input { height: 44px; }
.motion-phrases { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.motion-phrases button { border: 0; background: #eaf2fc; color: #284a6b; border-radius: 18px; padding: 6px 12px; font-size: 12px; }
.motion-phrases button:hover { background: #d6edff; }
.motion-phrases button.active { background: #0553b1; color: #fff; }
.motion-phrases button small { opacity: 0.6; margin-left: 2px; }
@media (max-width: 760px) {
  /* スマホは横1列のスクロールなので、「すべての動き」を先頭に出し、グループは全部並べる */
  .motion-filters > span { order: -2; }
  .motion-filters .motion-all { order: -1; }
  .motion-filters.is-collapsed .motion-extra { display: inline-block; }
  .motion-filters .motion-more { display: none; }
}

/* ── 「動きの一覧から選ぶ」をメインの入口に（グループ非表示のとき。2026-11-12） */
.motion-filters.motion-main { flex-wrap: wrap; overflow: visible; }
.motion-filters .motion-all-main { order: 0; border: 1px solid #0553b1; background: #fff; color: #0553b1; font-weight: 700; padding: 8px 18px; }
.motion-filters .motion-all-main:hover { background: #e0f2ff; }
.motion-filters .motion-all-main small { opacity: 0.7; font-weight: 400; margin-left: 4px; }
.motion-filters .motion-all-main.has-pick { border-style: dashed; }

/* ── 動きの言葉を2行だけ画面に出す（残りは「一覧から選ぶ」。2026-11-12） */
.motion-filters.motion-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: start; }
.motion-main > span { padding-top: 6px; }
.motion-inline { display: flex; flex-wrap: wrap; gap: 6px; max-height: 70px; overflow: hidden; }
.motion-inline button { height: 32px; border: 0; background: #eaf2fc; color: #284a6b; border-radius: 18px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
.motion-inline button:hover { background: #d6edff; }
.motion-inline button.active { background: #0553b1; color: #fff; }
.motion-inline button small { opacity: 0.6; margin-left: 2px; }
.motion-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
  .motion-filters.motion-main { grid-template-columns: minmax(0, 1fr); overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
  .motion-main > span { padding-top: 0; }
  .motion-actions { grid-column: 1; }
  .motion-inline button { font-size: 11px; padding: 0 10px; }
}

/* ── キーワード入力はサブ: ふだんは虫眼鏡のボタンだけ（2026-11-12） */
.search-toggle { display: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 22px; border: 1px solid #c9dff5; background: #fff; color: #0553b1; font-size: 12px; font-weight: 600; }
.search-toggle:hover { background: #e0f2ff; }
.search-row.is-collapsed .search-toggle { display: inline-flex; }
.search-row.is-collapsed .search-box { display: none; }
.search-row.is-collapsed { justify-content: space-between; align-items: center; }
.search-row.is-collapsed .clear-button { height: 40px; }
.search-row:not(.is-collapsed) .search-box { animation: search-open 0.18s ease-out; }
@keyframes search-open { from { opacity: 0; transform: scaleX(0.96); transform-origin: left; } }
@media (prefers-reduced-motion: reduce) { .search-row:not(.is-collapsed) .search-box { animation: none; } }

/* ── いまのカテゴリ・キーワードに無い動きの言葉は出さない（2026-11-12） */
[data-phrase].is-unavailable { display: none; }

/* ── ヘッダーの検索欄を外し、メニューも2つになったので、スマホでもロゴの文字を出す（360px 以下は記号だけ。2026-11-12） */
@media (max-width: 480px) {
  .logo > span:not(.brand-mark) { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 12px; }
}
@media (max-width: 360px) {
  .logo > span:not(.brand-mark) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 480px) { .header-nav a { white-space: nowrap; } }
@media (max-width: 400px) {
  .logo { gap: 6px; }
  .logo > span:not(.brand-mark) { font-size: 11px; }
  .header-nav a, .header-nav a[aria-current] { padding: 7px 9px; }
}
.filter-fab { transition: transform 0.15s ease-out; }
@media (prefers-reduced-motion: reduce) { .filter-fab { transition: none; } }

/* ── サブタイトル「個人開発者が勉強がてら…」: PC はロゴの下、スマホはヘッダーのすぐ下に1行（2026-11-12） */
.logo-text { display: flex; flex-direction: column; line-height: 1.35; }
.logo-sub { font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.site-sub-mobile { display: none; margin: 0; padding: 6px 18px; font-size: 11px; color: var(--muted); background: #eef6ff; border-bottom: 1px solid #e3eef9; text-align: center; }
@media (max-width: 760px) {
  .logo-sub { display: none; }
  .site-sub-mobile { display: block; }
}
@media (max-width: 480px) {
  .logo-text > span { font-size: 11px; }
}
@media (max-width: 360px) {
  .logo-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ── ヘッダーに「このサイトについて」。狭い画面では「このサイト」と短くする（2026-11-12） */
.nav-short { display: none; }
@media (max-width: 960px) {
  .nav-long-md { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-short-md { display: inline; }
  .header-nav a { white-space: nowrap; }
}
@media (max-width: 960px) {
  .nav-long-sm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-short-sm { display: inline; }
}
/* メニューが3つ並ぶ幅のない画面では、ロゴを記号だけに（名前は読み上げ用に残す。下にサブタイトルの帯がある） */
@media (max-width: 430px) {
  .logo > span.logo-text:not(.brand-mark) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.header-nav a { white-space: nowrap; }

/* ── 更新ログ（2026-11-12） */
.log-day h2 { font-size: 18px; margin: 32px 0 8px; }
.log-day ul { list-style: none; padding: 0; margin: 0; }
.log-day li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.log-type { justify-self: start; align-self: start; font-size: 12px; font-weight: 700; padding: 1px 10px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.log-0 { background: #e0f2ff; color: #0553b1; }
.log-1 { background: #fff4d6; color: #7a5a00; }
.log-2 { background: #e2f6ee; color: #1b6b4f; }
.log-links { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 13px; }
@media (max-width: 480px) { .log-day li { grid-template-columns: 1fr; gap: 4px; } }