/* folita 公開プロフィールページの見た目。
   テーマは .folita-page の CSS 変数（--f-*）で決まり、ユーザーの独自 CSS はこの後に読み込まれる。 */

.folita-page {
  min-height: 100%;
  width: 100%;
  background: var(--f-bg);
  color: var(--f-text);
  font-family: var(--f-font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.folita-page *, .folita-page *::before, .folita-page *::after { box-sizing: border-box; }
/* iOS / Android のタップ時の水色のハイライトは出さない（ナビ・アカウント欄・設定の面・リンクなど全体。amanetoki.com の site.css と同じ） */
.folita-page, .folita-page * { -webkit-tap-highlight-color: transparent; }
/* Safari の長押しメニューと文字の選択を全体で出さず、入力欄とタイムラインの投稿の本文（訳の元の文も）だけ選べるようにする（site.css と同じ） */
html { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable]:not([contenteditable="false"]),
.tl-text, .tl-quote-text, .tl-menu-source-text, .tl-noscript { -webkit-user-select: text; user-select: text; }
/* 文字の選択のハイライト（選べるのは上の投稿の本文と入力欄だけ）。テーマカラー（--f-accent）を白で薄めたパステルに、文字はその色で濁らせた黒。
   色テーマ（lib/theme.php の folita_color_theme_vars）はそのスケールの 100 / 900 をインラインの style で、マテリアル / Fluent はテーマの CSS が同じ変数を上書きする */
.folita-page { --f-selection: color-mix(in srgb, var(--f-accent) 35%, #ffffff); --f-selection-text: color-mix(in srgb, var(--f-accent) 35%, #111111); }
.folita-page ::selection { background: var(--f-selection); color: var(--f-selection-text); }
/* 公開ページは中身が短くても画面いっぱいに背景を敷く（ページ（タブ）を切り替えたときに背景が途中で切れないように） */
.folita-page:not(.folita-page--editable) { min-height: 100vh; min-height: 100dvh; }
.folita-cover { height: 180px; width: 100%; background-size: cover; background-position: center; }
@media (min-width: 640px) { .folita-cover { height: 240px; } }
.folita-container {
  max-width: var(--f-max);
  margin: 0 auto;
  padding: 48px 20px 64px;
  display: flex; flex-direction: column; align-items: center;
}
.folita-container--cover { padding-top: 0; margin-top: -48px; }
.folita-header { display: flex; flex-direction: column; align-items: center; text-align: center; }
.folita-avatar {
  width: var(--f-avatar); height: var(--f-avatar);
  object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,.15);
  background: var(--f-card);
}
.folita-avatar--initial { display: flex; align-items: center; justify-content: center; font-size: calc(var(--f-avatar) * .4); font-weight: 700; }
.folita-avatar--circle { border-radius: 50%; }
.folita-avatar--rounded { border-radius: 28%; }
.folita-avatar--square { border-radius: 0; }
/* ひとことステータス（アイコンの右上の吹き出し）と誕生日ケーキ（左下） */
.folita-avatar-wrap { position: relative; display: inline-block; }
.folita-status { position: absolute; left: calc(100% - 22px); bottom: calc(100% - 18px); z-index: 1; width: max-content; max-width: min(180px, 40vw); padding: 6px 13px; border: 1px solid var(--f-border); border-radius: 16px 16px 16px 4px; background: var(--f-surface); color: var(--f-text); font-size: 12px; font-weight: 500; line-height: 1.5; text-align: left; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.folita-status::before { content: ""; position: absolute; left: 8px; bottom: -5px; width: 9px; height: 9px; background: inherit; border-left: 1px solid var(--f-border); border-bottom: 1px solid var(--f-border); transform: rotate(45deg); }
.folita-avatar-cake { position: absolute; left: clamp(-36px, calc(var(--f-avatar) * -.32), -22px); bottom: clamp(-26px, calc(var(--f-avatar) * -.22), -16px); z-index: 2; display: flex; align-items: center; justify-content: center; width: clamp(40px, calc(var(--f-avatar) * .52), 54px); height: clamp(40px, calc(var(--f-avatar) * .52), 54px); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .22)); cursor: pointer; user-select: none; touch-action: manipulation; transition: transform .18s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: folita-pop .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.folita-avatar-cake svg { width: 100%; height: 100%; display: block; overflow: visible; }
.folita-avatar-cake:hover { transform: scale(1.15) rotate(-6deg); }
.folita-avatar-cake:active, .folita-avatar-cake.is-bouncing { animation: folita-cake-bounce .5s ease; }
@keyframes folita-cake-bounce { 0% { transform: scale(1); } 30% { transform: scale(1.25) rotate(-12deg); } 60% { transform: scale(0.94) rotate(4deg); } 80% { transform: scale(1.06) rotate(-2deg); } 100% { transform: scale(1) rotate(0); } }
.folita-name { margin: 16px 0 0; font-size: 22px; font-weight: 700; line-height: 1.3; }
.folita-handle { display: none; margin: 4px 0 0; font-size: 13px; color: var(--f-muted); }   /* 名前の下の @handle。Windows のテーマだけ出す (fluent.css)。ほかはカスタム CSS で display を戻せば出る */
.folita-bio { margin: 8px 0 0; max-width: 60ch; font-size: 14.5px; color: var(--f-muted); white-space: pre-wrap; }
.folita-header__social { width: 100%; margin-top: 16px; }   /* 骨組みのとき見出しに入る SNS ブロック (render.php) */
.folita-birthday { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; color: var(--f-muted); line-height: 1.4; }
.folita-birthday__icon { font-size: 15px; line-height: 1; }
.folita-birthday__text { font-weight: 500; letter-spacing: .02em; }
.folita-birthday__badge { display: inline-block; padding: 1px 7px; font-size: 11px; font-weight: 700; border-radius: 999px; background: color-mix(in srgb, var(--f-accent) 15%, transparent); color: var(--f-accent); letter-spacing: 0; animation: folita-pop .4s ease; }
@keyframes folita-pop { 0% { transform: scale(.8); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }

/* 誕生日限定: X 風のカラフルな風船アニメーション（全タブ対応） */
.folita-balloons { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99999; overflow: hidden; }
.folita-balloon { position: absolute; bottom: -100px; pointer-events: auto; cursor: pointer; user-select: none; touch-action: manipulation; will-change: transform; animation: folita-balloon-rise var(--rise-dur, 11s) linear var(--rise-delay, 0s) forwards; }
.folita-balloon__inner { will-change: transform; animation: folita-balloon-sway var(--sway-dur, 3.4s) ease-in-out infinite alternate; }
.folita-balloon svg { display: block; overflow: visible; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .15)); transition: transform .1s ease; }
.folita-balloon:hover svg { transform: scale(1.08); }
.folita-balloon.is-popped { pointer-events: none; animation: folita-balloon-pop .16s ease-out forwards; }
@keyframes folita-balloon-rise { 0% { transform: translateY(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(calc(-100vh - 140px)); opacity: 0; } }
@keyframes folita-balloon-sway { 0% { transform: translateX(calc(var(--sway-dist, 20px) * -1)) rotate(-7deg); } 100% { transform: translateX(var(--sway-dist, 20px)) rotate(7deg); } }
@keyframes folita-balloon-pop { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .8; } 100% { transform: scale(0.1); opacity: 0; } }

.folita-blocks { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 32px; }
.folita-blocks--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(64px, auto); grid-auto-flow: dense; }
.folita-blocks--grid .folita-block { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.folita-blocks--grid .folita-block > * { flex: 1; }
.folita-col-1 { grid-column: span 1; }
.folita-col-2 { grid-column: span 2; }
.folita-row-1 { grid-row: span 1; }
.folita-row-2 { grid-row: span 2; }
.folita-block { width: 100%; min-width: 0; }
.folita-block--hidden { opacity: .35; }

.folita-align-left { text-align: left; }
.folita-align-center { text-align: center; }
.folita-align-right { text-align: right; }

/* ボタン（リンク） */
.folita-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px;
  font-size: 15px; font-weight: 600; text-decoration: none; line-height: 1.3;
  border-radius: var(--f-btn-radius);
  border: 2px solid transparent;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.folita-btn:active { transform: scale(.985); }
.folita-btn--solid { background: var(--f-btn); color: var(--f-btn-text); }
.folita-btn--solid:hover { opacity: .9; }
.folita-btn--outline { background: transparent; color: var(--f-btn); border-color: var(--f-btn); }
.folita-btn--outline:hover { background: var(--f-btn); color: var(--f-btn-text); }
.folita-btn--soft { background: color-mix(in srgb, var(--f-btn) 15%, transparent); color: var(--f-btn); }
.folita-btn--soft:hover { background: color-mix(in srgb, var(--f-btn) 25%, transparent); }
.folita-btn--shadow { background: var(--f-btn); color: var(--f-btn-text); box-shadow: 4px 4px 0 0 rgba(0,0,0,.35); }
.folita-btn--shadow:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 rgba(0,0,0,.35); }
.folita-btn--glass { background: rgba(255,255,255,.12); color: var(--f-btn-text); border-color: rgba(255,255,255,.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.folita-btn--glass:hover { background: rgba(255,255,255,.22); }
.folita-link__emoji { font-size: 1.2em; line-height: 1; }
.folita-link__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* リッチリンク */
.folita-richlink {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px;
  border-radius: var(--f-btn-radius); background: var(--f-card); color: inherit; text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
.folita-richlink:hover { opacity: .92; }
.folita-richlink__img { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: calc(var(--f-btn-radius) * .6); }
.folita-richlink__img--empty { background: color-mix(in srgb, var(--f-accent) 20%, transparent); }
.folita-richlink__body { min-width: 0; flex: 1; text-align: left; }
.folita-richlink__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folita-richlink__desc { font-size: 13px; color: var(--f-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.folita-text { margin: 0; font-size: 15px; white-space: pre-wrap; }
.folita-heading { margin: 8px 0 0; font-weight: 700; line-height: 1.3; }
.folita-heading--1 { font-size: 26px; }
.folita-heading--2 { font-size: 20px; }
.folita-heading--3 { font-size: 16px; }

.folita-image { display: block; width: 100%; object-fit: cover; border-radius: var(--f-btn-radius); }
.folita-image-link { display: block; }
.folita-image-wrap { position: relative; display: block; }
.folita-image__label { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px); padding: 3px 9px; border-radius: 4px; background: var(--f-card); color: var(--f-text); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folita-aspect-square { aspect-ratio: 1; }
.folita-aspect-video { aspect-ratio: 16 / 9; }
.folita-aspect-wide { aspect-ratio: 21 / 9; }

/* 画像の横並び（2〜4 連）とスライド */
.folita-gallery { display: grid; gap: 8px; }
.folita-gallery--cols-1 { grid-template-columns: minmax(0, 1fr); }
.folita-gallery--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.folita-gallery--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.folita-gallery--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.folita-gallery__item { display: block; min-width: 0; }
.folita-gallery__img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: calc(var(--f-btn-radius) * .6); }
.folita-gallery__icon { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: calc(var(--f-btn-radius) * .6); background: var(--f-card); color: var(--f-text); }
.folita-gallery__icon svg { width: 55%; height: 55%; }
.folita-gallery--slide { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.folita-gallery--slide::-webkit-scrollbar { display: none; }
.folita-gallery--slide .folita-gallery__item { flex: 0 0 85%; scroll-snap-align: center; }

.folita-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.folita-social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--f-card); color: var(--f-text);
  transition: transform .15s ease;
}
.folita-social-icon:hover { transform: scale(1.1); }
.folita-social-icon svg { width: 20px; height: 20px; }

/* 表（見出しと値の行） */
.folita-table { padding: 4px 18px; border-radius: var(--f-btn-radius); background: var(--f-card); color: var(--f-text); text-align: left; }
.folita-table__title { margin: 12px 0 0; font-weight: 700; }
.folita-table__rows { margin: 0; }
.folita-table__row { display: grid; grid-template-columns: minmax(5.5em, 28%) minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.folita-table__row + .folita-table__row { border-top: 1px solid var(--f-border); }
.folita-table dt { font-size: 13px; font-weight: 700; color: var(--f-muted); }
.folita-table dd { margin: 0; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.folita-table dd a { color: var(--f-accent); text-decoration: none; }
.folita-table dd a:hover { text-decoration: underline; }

/* タグ（「YouTube 個人」のようなジャンル + カテゴリの丸いラベル） */
.folita-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.folita-tags.folita-align-left { justify-content: flex-start; }
.folita-tags.folita-align-right { justify-content: flex-end; }
.folita-tag { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 12px; border-radius: 999px; background: var(--f-card); color: var(--f-text); line-height: 1.5; }
.folita-tag__genre { font-size: 15px; font-weight: 700; }
.folita-tag__label { font-size: 12px; font-weight: 700; color: var(--f-muted); }

.folita-embed { overflow: hidden; border-radius: var(--f-btn-radius); background: var(--f-card); }
.folita-embed iframe { display: block; width: 100%; border: 0; }
.folita-embed--video { aspect-ratio: 16 / 9; }
.folita-embed--video iframe { height: 100%; }
.folita-embed--spotify iframe { height: 152px; }
.folita-embed--soundcloud iframe { height: 166px; }
.folita-embed--spotify.folita-embed--large iframe { height: 352px; }
.folita-embed--apple iframe { height: 450px; }
.folita-embed--apple.folita-embed--small iframe { height: 175px; }
.folita-embed__title { margin: 10px 2px 0; font-size: 13px; font-weight: 700; text-align: left; overflow-wrap: anywhere; }

/* フィード（note / Bluesky / YouTube / X の新しい投稿） */
.folita-feed { padding: 12px; border-radius: var(--f-btn-radius); background: var(--f-card); text-align: left; }
.folita-feed__head { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; font-weight: 700; }
.folita-feed__icon { display: flex; flex: none; }
.folita-feed__icon svg { width: 18px; height: 18px; }
.folita-feed__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folita-feed__more { flex: none; font-size: 12px; font-weight: 600; color: var(--f-accent); text-decoration: none; }
.folita-feed__item { display: flex; gap: 12px; padding: 10px 2px; color: inherit; text-decoration: none; border-top: 1px solid color-mix(in srgb, var(--f-muted) 20%, transparent); }
.folita-feed__item:hover { opacity: .85; }
.folita-feed__img { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: min(calc(var(--f-btn-radius) * .5), 12px); }
.folita-feed--youtube .folita-feed__img { width: 112px; height: 63px; }
.folita-feed__body { min-width: 0; flex: 1; }
.folita-feed__item-title { font-size: 14px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.folita-feed__text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.folita-feed__item-title + .folita-feed__text { font-size: 13px; color: var(--f-muted); white-space: normal; -webkit-line-clamp: 2; line-clamp: 2; }
.folita-feed__tag { color: var(--f-link, var(--f-accent)); }
/* 添付画像はタイムラインブロック（.tl-media）と同じ見た目にする。角丸はボタンの丸み（ピル型だと 999px）を使わず 12px で固定する。
   3 枚以上は正方形にそろえて同じ高さに切り抜く */
.folita-feed__images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.folita-feed__images img { display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 320px; object-fit: cover; border-radius: 12px; border: 1px solid var(--f-border); }
/* 1 枚のときは切り抜かず、縦横比を保って全体を出す */
.folita-feed__images--single { grid-template-columns: minmax(0, 1fr); }
.folita-feed__images--single img { width: auto; max-width: 100%; height: auto; aspect-ratio: auto; max-height: 480px; object-fit: contain; }
/* 2 枚は縦横比を保ったまま高さをそろえて横に並べる（幅は縦横比に応じて配分。flex-grow は profile.js が入れる） */
.folita-feed__images--pair { display: flex; align-items: stretch; }
.folita-feed__images--pair img { flex: 1 1 0%; min-width: 0; height: auto; aspect-ratio: auto; max-height: 320px; }
.folita-feed__date { display: block; margin-top: 4px; font-size: 12px; color: var(--f-muted); }
.folita-feed__error { margin-top: 8px; font-size: 12px; color: #dc2626; }

.folita-divider { width: 50%; margin: 8px auto; border: 0; border-top: 1px solid color-mix(in srgb, var(--f-muted) 40%, transparent); }
.folita-placeholder {
  display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--f-muted) 50%, transparent); border-radius: var(--f-btn-radius);
  color: var(--f-muted); font-size: 13px; text-align: center;
}
.folita-footer { margin-top: 48px; font-size: 12px; }
.folita-footer a { color: var(--f-muted); text-decoration: none; opacity: .7; }
.folita-footer a:hover { opacity: 1; }

/* ===== ページ（タブ）とナビ（lib/render.php の folita_render_nav。切り替えは assets/js/profile.js） ===== */
.folita-panels { width: 100%; }
.folita-panel { display: none; width: 100%; }
.folita-panel.is-active { display: block; }
/* JS が無いときは最初のページだけ見える（is-active はサーバーが付ける） */
.folita-panel .folita-header { margin-bottom: 0; }
.folita-panel .folita-blocks { margin-top: 32px; }
.folita-nav { display: flex; align-items: stretch; gap: 2px; width: 100%; }
.folita-nav__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; border-radius: 12px; color: var(--f-muted); font-size: 11.5px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s, background .2s; }
.folita-nav__item svg { width: 24px; height: 24px; flex: none; }
.folita-nav__img { width: 24px; height: 24px; flex: none; object-fit: contain; border-radius: 5px; }   /* アップロードしたアイコン画像 (nav の iconUrl)。svg と同じ大きさ */
/* Segoe Fluent Icons のアイコン (icon = segoe:XXXX): 端末にフォントがあれば (html.has-segoe-icons。profile.js) グリフ、無ければ隣の線画 (globe) */
.folita-nav__glyph { display: none; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets"; font-size: 20px; line-height: 1; speak: none; }
html.has-segoe-icons .folita-nav__item[data-icon-glyph] .folita-nav__glyph { display: inline-flex; }
html.has-segoe-icons .folita-nav__item[data-icon-glyph] svg { display: none; }
.folita-nav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.folita-nav--nolabels .folita-nav__label { display: none; }
.folita-nav__item:hover { color: var(--f-text); }
.folita-nav__item.is-active { color: var(--f-nav-accent, var(--f-accent)); background: color-mix(in srgb, var(--f-nav-accent, var(--f-accent)) 12%, transparent); }
.folita-nav__lens { display: none; }
/* 下バー: 画面下に固定（本文の下端が隠れないよう余白を足す） */
/* 中央寄せは margin で行う（transform はリキッドグラスの押したときの拡大に使う） */
.folita-nav--bottom { position: fixed; left: 0; right: 0; margin-inline: auto; width: min(var(--f-max), calc(100% - 32px)); bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 30; height: 60px; padding: 4px; border-radius: 30px; background: var(--f-card); box-shadow: 0 10px 30px rgba(0,0,0,.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.folita-nav--bottom .folita-nav__item { border-radius: 999px; }
.folita-has-nav.folita-nav-bottom .folita-container { padding-bottom: calc(64px + 50px + env(safe-area-inset-bottom)); }
/* エディタのプレビューでは枠の中に留める */
.folita-page--editable .folita-nav--bottom { position: absolute; bottom: 12px; width: calc(100% - 24px); }
.folita-page--editable { position: relative; }
/* 上のタブ: 見出しの下に並ぶピル */
.folita-nav--top { margin: 24px 0 -8px; padding: 4px; border-radius: 14px; background: var(--f-card); }
.folita-nav--top .folita-nav__item { flex-direction: row; gap: 6px; padding: 8px 10px; font-size: 13px; }
.folita-nav--top .folita-nav__item svg, .folita-nav--top .folita-nav__img, .folita-nav--top .folita-nav__glyph { width: 18px; height: 18px; font-size: 16px; }
.folita-placeholder--page { margin-top: 8px; }

/* ローカル動画の簡易プレーヤー */
.folita-video { overflow: hidden; border-radius: var(--f-radius, 16px); background: var(--f-card); }
.folita-video video { display: block; width: 100%; max-height: 70vh; background: #000; aspect-ratio: 16 / 9; object-fit: contain; }
.folita-video__title { margin: 12px 16px; font-size: 1rem; }
.folita-video__description { margin: 12px 16px 16px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ===== 骨組み（下バーのナビがあるとき .folita-page に .folita-chrome。amanetoki.com の上下バー・左メニュー・設定の面を移植。render.php の $chrome） =====
   広い (769px 以上) ときは左にメニュー (.folita-sidebar: アカウント欄 .folita-brand + ページの一覧 .folita-nav--side + フッター .folita-sidebar__foot) と、
   本文の上にページの見出し (.folita-topbar__title)。狭いときは上に固定のバー (.folita-topbar: 名前とアバター) と下バー (.folita-nav--bottom)。
   幅は .folita-page のコンテナークエリで見る (プレビューでは端末の画面の幅)。左メニューの高さは 100cqh (公開ページでは画面、プレビューでは端末の画面 = editor.css の size コンテナー)。
   ここは骨組み (配置) だけで、色・形はテーマの CSS (material.css / liquidglass.css / fluent.css) が決める */
.folita-chrome { container-type: inline-size; }
.folita-shell { display: flex; align-items: stretch; min-height: 100%; }
.folita-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.folita-sidebar { display: none; }
.folita-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; }
.folita-topbar__title { display: none; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* アカウント欄 (button)。押すと Windows はアカウントのパネル、ほかは設定の面 (assets/js/profile.js) */
.folita-brand { display: flex; align-items: center; gap: 10px; min-width: 0; position: relative; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.folita-brand:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }
.folita-brand__avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--f-card); }
.folita-brand__avatar--initial { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.folita-brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.folita-brand__name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folita-brand__sub { display: none; font-size: 12px; color: var(--f-muted); }
.folita-chrome .folita-container { padding-top: 24px; }
/* プレビュー (端末の画面がスクロールする) では下バーを画面の下に留める (absolute はページの下端に付く。fixed は端末の画面ではなくブラウザーの画面に付く) */
.folita-chrome.folita-page--editable .folita-nav--bottom { position: sticky; bottom: 12px; }
@container (min-width: 769px) {
  .folita-sidebar { display: flex; flex-direction: column; flex: none; position: sticky; top: 0; width: 240px; height: 100cqh; max-height: 100vh; overflow-y: auto; }
  .folita-nav--side { flex-direction: column; gap: 0; width: auto; }
  .folita-nav--side .folita-nav__item { flex: none; flex-direction: row; justify-content: flex-start; overflow: visible; }
  .folita-nav--side .folita-nav__label { display: block; }   /* 左メニューでは名前を隠す設定でも出す */
  .folita-sidebar__foot { margin-top: auto; font-size: 12px; color: var(--f-muted); }
  .folita-sidebar__foot .folita-footer { margin: 0 0 4px; font-size: 12px; text-align: left; }   /* Made with folita は左メニューの © の上 (各タブの下には出さない) */
  .folita-topbar .folita-brand__text { display: none; }   /* 広いときは名前の代わりにページの見出し */
  .folita-topbar__title { display: block; }
  .folita-chrome .folita-nav--bottom { display: none; }
  /* 本文は左メニューの右側の幅をそのまま使う (amanetoki.com の .panel-inner と同じ。テーマの最大幅 --f-max はここでは使わない)。
     つぶやきはこの幅に合わせて列に敷き詰まる (timeline.css の .tl-list.is-masonry) */
  .folita-chrome .folita-container { max-width: none; width: 100%; margin: 0; padding-left: 24px; padding-right: 24px; }
  .folita-chrome.folita-has-nav.folita-nav-bottom .folita-container { padding-top: 16px; padding-bottom: 64px; }
}

/* ===== 骨組みのホーム: プロフィールの見出しと表以外のブロックを左右 2 枚のパネルに、表は全幅 (amanetoki.com のホームと同じ。material / Windows / iOS の全テーマ)。
   .folita-container をグリッドにし、ページ (.folita-panels / .folita-panel) とブロックの入れ物 (.folita-blocks) は display: contents で箱を消して、見出しとブロックを直接グリッドに置く:
     左 (1 列目): プロフィールの見出し (.folita-header: アイコン・名前・自己紹介・誕生日・SNS)。1〜60 行目を占める (表の前まで)
     右 (2 列目): 表以外のブロック (PROFILE の文章など)。続いた分をまとめて 1 枚のパネルに見せる (先頭と末尾だけ角丸と上下の余白と枠線)
     全幅 (1〜2 列目): 表 (.folita-block-table)。左右の分割には入れない
   左は留めない (ページと一緒にスクロールする)。狭い画面でも 2 列 (左右 1 : 1)、広い (769px 以上) ときは左 400px。グリッド配置 (.folita-blocks--grid) はそのまま右の 1 枚のパネルに入れる。
   ここは配置だけで、パネルの見た目はテーマの CSS が変数で決める: --fc-radius (角)、--fc-bg (地)、--fc-bw / --fc-border (枠線)、--fc-shadow (最後のブロックの影)、--fc-inset (最初のブロックの内側のハイライト)、--fc-blur (ぼかし)。
   影とハイライトの「無し」は none にしない (2 つ並べる box-shadow が壊れる)。
   効かせるのは見えているページに見出しがあるときだけ (見出しを全ページに出すときは .folita-container の直下、最初のページだけのときはそのパネルの中)。
   つぶやきなど見出しの無いページは 1 列のまま全幅を使う。:where で包んで詳細度は前と同じ (.folita-chrome + ブロック) にしてある ===== */
.folita-chrome { --fc-radius: 24px; --fc-bg: var(--f-card); --fc-bw: 0; --fc-border: transparent; --fc-shadow: 0 0 0 0 transparent; --fc-inset: 0 0 0 0 transparent; --fc-blur: none; }
.folita-chrome :where(.folita-container:has(> .folita-header, > .folita-panels > .folita-panel.is-active > .folita-header)) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: stretch;
  .folita-panels, .folita-panel.is-active, .folita-blocks:not(.folita-blocks--grid) { display: contents; }
  .folita-header { grid-column: 1; grid-row: 1 / span 60; box-sizing: border-box; width: 100%; margin: 0; }
  .folita-block:not(.folita-block-table), .folita-blocks--grid, .folita-placeholder--page { grid-column: 2; }
  .folita-block:not(.folita-block-table) { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; width: 100%; padding: 12px 12px 0; background: var(--fc-bg); border: var(--fc-bw) solid var(--fc-border); border-top-width: 0; border-bottom-width: 0; -webkit-backdrop-filter: var(--fc-blur); backdrop-filter: var(--fc-blur); }   /* 左に合わせて伸びた分は上下に等しく配り、文章を上下中央に */
  .folita-block:not(.folita-block-table):not(.folita-block:not(.folita-block-table) + *) { padding-top: 16px; border-top-width: var(--fc-bw); border-top-left-radius: var(--fc-radius); border-top-right-radius: var(--fc-radius); box-shadow: var(--fc-inset); }
  .folita-block:not(.folita-block-table):not(:has(+ .folita-block:not(.folita-block-table))) { padding-bottom: 16px; border-bottom-width: var(--fc-bw); border-bottom-left-radius: var(--fc-radius); border-bottom-right-radius: var(--fc-radius); box-shadow: var(--fc-shadow); }
  .folita-block:not(.folita-block-table):not(.folita-block:not(.folita-block-table) + *):not(:has(+ .folita-block:not(.folita-block-table))) { box-shadow: var(--fc-shadow), var(--fc-inset); }   /* 1 つだけのときは両方 */
  .folita-blocks--grid { box-sizing: border-box; width: 100%; margin-top: 0; padding: 16px 12px; border-radius: var(--fc-radius); background: var(--fc-bg); border: var(--fc-bw) solid var(--fc-border); box-shadow: var(--fc-shadow), var(--fc-inset); -webkit-backdrop-filter: var(--fc-blur); backdrop-filter: var(--fc-blur); }
  .folita-block-table { grid-column: 1 / -1; width: 100%; margin-top: 12px; }
  /* 左右の高さを揃える: 見出しは 1〜60 行目を占め、右の表以外のブロックは n 番目 (nth-child) を n 行目に置き、最後のものを 61 行目の手前まで伸ばす (grid-row-end)。
     どちらの列も同じ行の範囲を占めるので、短い方は長い方の高さまで余白 (パネルの面の色) で伸びる (align-items: stretch)。表以外のブロックが 20 個までの前提 */
  .folita-blocks > .folita-block:nth-child(1):not(.folita-block-table) { grid-row-start: 1; } .folita-blocks > .folita-block:nth-child(2):not(.folita-block-table) { grid-row-start: 2; } .folita-blocks > .folita-block:nth-child(3):not(.folita-block-table) { grid-row-start: 3; } .folita-blocks > .folita-block:nth-child(4):not(.folita-block-table) { grid-row-start: 4; } .folita-blocks > .folita-block:nth-child(5):not(.folita-block-table) { grid-row-start: 5; } .folita-blocks > .folita-block:nth-child(6):not(.folita-block-table) { grid-row-start: 6; } .folita-blocks > .folita-block:nth-child(7):not(.folita-block-table) { grid-row-start: 7; } .folita-blocks > .folita-block:nth-child(8):not(.folita-block-table) { grid-row-start: 8; } .folita-blocks > .folita-block:nth-child(9):not(.folita-block-table) { grid-row-start: 9; } .folita-blocks > .folita-block:nth-child(10):not(.folita-block-table) { grid-row-start: 10; } .folita-blocks > .folita-block:nth-child(11):not(.folita-block-table) { grid-row-start: 11; } .folita-blocks > .folita-block:nth-child(12):not(.folita-block-table) { grid-row-start: 12; } .folita-blocks > .folita-block:nth-child(13):not(.folita-block-table) { grid-row-start: 13; } .folita-blocks > .folita-block:nth-child(14):not(.folita-block-table) { grid-row-start: 14; } .folita-blocks > .folita-block:nth-child(15):not(.folita-block-table) { grid-row-start: 15; } .folita-blocks > .folita-block:nth-child(16):not(.folita-block-table) { grid-row-start: 16; } .folita-blocks > .folita-block:nth-child(17):not(.folita-block-table) { grid-row-start: 17; } .folita-blocks > .folita-block:nth-child(18):not(.folita-block-table) { grid-row-start: 18; } .folita-blocks > .folita-block:nth-child(19):not(.folita-block-table) { grid-row-start: 19; } .folita-blocks > .folita-block:nth-child(20):not(.folita-block-table) { grid-row-start: 20; }
  .folita-blocks > .folita-block:not(.folita-block-table):not(:has(~ .folita-block:not(.folita-block-table))) { grid-row-end: 61; }
  .folita-block-table + .folita-block:not(.folita-block-table) { margin-top: 12px; }   /* 表の後に続く右のパネル */
  @container (min-width: 769px) {
    & { grid-template-columns: 400px minmax(0, 1fr); column-gap: 16px; }
    .folita-block:not(.folita-block-table) { padding-left: 24px; padding-right: 24px; }
    .folita-block:not(.folita-block-table):not(.folita-block:not(.folita-block-table) + *) { padding-top: 24px; }
    .folita-block:not(.folita-block-table):not(:has(+ .folita-block:not(.folita-block-table))) { padding-bottom: 24px; }
    .folita-blocks--grid { padding: 24px; }
    .folita-block-table { margin-top: 16px; }
  }
}

/* 設定の面 (.folita-menu。マテリアル / リキッドグラスの骨組みでアバターを押すと右から出る。render.php の folita_render_menu、開閉は profile.js)。
   ここは骨組みだけ (色・形・出入りの動きはテーマの CSS)。プレビューでは端末の画面の中に出す (absolute + sticky で今見えている範囲に) */
.folita-menu { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; align-items: stretch; }
.folita-menu[hidden] { display: none; }
.folita-menu__sheet { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.folita-menu__hdr { display: flex; align-items: center; gap: 10px; flex: none; }
.folita-menu__back, .folita-menu__close { display: flex; align-items: center; justify-content: center; padding: 6px; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; cursor: pointer; }
.folita-menu__back svg, .folita-menu__close svg { width: 24px; height: 24px; }
.folita-menu__title { flex: 1; font-size: 16px; font-weight: 600; }
.folita-menu__body { flex: 1; display: flex; flex-direction: column; }
.folita-menu__body > * { flex-shrink: 0; }   /* 中身が画面より長いときにカードを縮めない */
.folita-menu__account { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.folita-menu__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.folita-menu__avatar--guest { display: flex; align-items: center; justify-content: center; background: var(--f-accent); color: #fff; }
.folita-menu__avatar--guest svg { width: 24px; height: 24px; }
.folita-menu__id { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.folita-menu__name { font-size: 15px; font-weight: 600; }
.folita-menu__sub { font-size: 12px; color: var(--f-muted); word-break: break-all; }
.folita-menu__badge { display: none; }
.folita-menu__group { display: flex; flex-direction: column; }
.folita-menu__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.folita-menu__item > svg { flex: none; width: 20px; height: 20px; }
.folita-menu__item > .folita-menu__chev { width: 6px; height: 10px; margin-left: auto; }
.folita-menu__note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--f-muted); }
.folita-page--editable .folita-menu { position: absolute; align-items: flex-start; }
.folita-page--editable .folita-menu__sheet { position: sticky; top: 0; height: 100cqh; }