/* =========================================================================
   ui.css — 27o.poker の共通部品(C 案を 2026-10-16 にブラッシュアップ。比較は design-lab/refresh/)
   元: design-lab/shared/base.css + design-lab/ds/radix/components.css

   使い方(移行したページだけ。<body data-ui> の付いたページにしか効かない):
     <head>
       <script src="/assets/theme.js"></script>              ← 描画前にライト/ダークを決める(同期で読む)
       <link rel="preconnect" href="https://fonts.googleapis.com">
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
       <link rel="stylesheet" href="/assets/tokens.css">
       <link rel="stylesheet" href="/assets/ui.css">
     </head>
     <body data-ui>

   セレクタは :where([data-ui]) で始め、詳細度を「クラス 1 つ分」に抑えている。
   ページ固有の <style> でクラス 1 つを書けば上書きできる(後に書いたほうが勝つ)。
   色・文字・余白はすべて tokens.css のトークンから取る。ここに色の値を直接書かない。
   ========================================================================= */

/* ---- 土台 ---------------------------------------------------------------- */
body[data-ui] {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 0;
  font-kerning: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 中身が短いページでもフッターを画面の下に置く */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
:where([data-ui]) *, :where([data-ui]) *::before, :where([data-ui]) *::after { box-sizing: border-box; }
:where([data-ui]) :where(h1, h2, h3, h4, p, figure, ul, ol) { margin: 0; }
:where([data-ui]) :where(ul[role="list"]) { list-style: none; padding: 0; }
:where([data-ui]) a { color: inherit; text-underline-offset: 3px; }
:where([data-ui]) code, :where([data-ui]) kbd { font-family: var(--font-mono); font-size: .92em; letter-spacing: 0; }
:where([data-ui]) :where(button, input, select, textarea) { font: inherit; letter-spacing: inherit; color: inherit; }
:where([data-ui]) .icon { width: 16px; height: 16px; flex: none; }
:where([data-ui]) :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
:where([data-ui]) ::selection { background: var(--c-selection); }
:where([data-ui]) [hidden] { display: none !important; }
/* 画像などをライト/ダークで出し分ける */
:where([data-ui]) .only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :where([data-ui]) .only-dark { display: revert; }
  :root:not([data-theme="light"]) :where([data-ui]) .only-light { display: none; }
}
:root[data-theme="dark"] :where([data-ui]) .only-dark { display: revert; }
:root[data-theme="dark"] :where([data-ui]) .only-light { display: none; }

/* ---- ボタン(塗り = primary、soft = secondary、ghost) ------------------- */
:where([data-ui]) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); padding-inline: var(--space-4);
  border: var(--border-w) solid transparent; border-radius: var(--radius-control);
  background: var(--c-surface-2); color: var(--c-fg);
  font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-ui);
  line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s, color .12s, box-shadow .12s;
}
:where([data-ui]) .btn:hover:not(:disabled) { background: var(--c-surface-active); }
:where([data-ui]) .btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
:where([data-ui]) .btn--primary:hover:not(:disabled) { background: var(--c-primary-hover); }
:where([data-ui]) .btn--secondary { background: var(--c-surface-2); }
:where([data-ui]) .btn--ghost { background: transparent; color: var(--c-fg-muted); }
:where([data-ui]) .btn--ghost:hover:not(:disabled) { background: var(--c-surface-hover); color: var(--c-fg); }
:where([data-ui]) .btn--danger { background: var(--c-danger-bg); color: var(--c-danger-fg); }
:where([data-ui]) .btn--danger:hover:not(:disabled) { background: var(--red-3); }
:where([data-ui]) .btn--sm { height: var(--control-h-sm); padding-inline: var(--space-3); font-size: var(--text-xs); }
:where([data-ui]) .btn--icon { width: var(--control-h); padding: 0; }
:where([data-ui]) .btn--sm.btn--icon { width: var(--control-h-sm); }
:where([data-ui]) .btn--block { width: 100%; }
:where([data-ui]) .btn:disabled { cursor: not-allowed; opacity: .45; }
/* 選択中のボタン(配色の選択など、aria-pressed で状態を持つもの) */
:where([data-ui]) .btn[aria-pressed="true"] { background: var(--c-primary); color: var(--c-on-primary); }
:where([data-ui]) .btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ---- バッジ ------------------------------------------------------------- */
:where([data-ui]) .badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: var(--badge-h); padding-inline: var(--space-2);
  border-radius: var(--radius-badge); border: var(--border-w) solid transparent;
  background: var(--c-surface-2); color: var(--c-fg-muted);
  font-size: var(--text-2xs); font-weight: var(--weight-medium); line-height: 1; letter-spacing: var(--tracking-ui);
  white-space: nowrap; vertical-align: middle;
}
:where([data-ui]) .badge--pro { height: 18px; padding-inline: 5px; background: var(--c-pro-bg); color: var(--c-pro-fg); border-color: var(--c-pro-border); font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); }
:where([data-ui]) .badge--ok { background: var(--c-success-bg); color: var(--c-success-fg); }

/* ---- フォーム ----------------------------------------------------------- */
:where([data-ui]) .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:where([data-ui]) .field__label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--c-fg-muted); line-height: var(--leading-ui); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
:where([data-ui]) .field__hint, :where([data-ui]) .hint { font-size: var(--text-xs); color: var(--c-fg-muted); line-height: var(--leading-ui); }
:where([data-ui]) .input, :where([data-ui]) .textarea {
  width: 100%; min-width: 0;
  padding: 9px var(--space-3);
  border: var(--border-w) solid var(--c-border-input); border-radius: var(--radius-field);
  background: var(--c-input-bg); color: var(--c-fg);
  font-size: var(--text-sm); line-height: var(--leading-ui);
}
:where([data-ui]) .input { height: var(--control-h); padding-block: 0; }
:where([data-ui]) .textarea { resize: vertical; min-height: 96px; }
:where([data-ui]) .input::placeholder, :where([data-ui]) .textarea::placeholder { color: var(--c-fg-subtle); opacity: 1; }
:where([data-ui]) .input:focus-visible, :where([data-ui]) .textarea:focus-visible, :where([data-ui]) .code-input:focus-visible {
  outline: 0; border-color: var(--c-focus); box-shadow: var(--shadow-focus);
}
:where([data-ui]) .select {
  -webkit-appearance: none; appearance: none; height: var(--control-h); max-width: 100%;
  padding-inline: 14px calc(var(--space-3) + 18px);
  border: var(--border-w) solid transparent; border-radius: var(--radius-control);
  background: var(--c-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5' fill='none' stroke='%23868e8b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--space-3) center / 14px;
  color: var(--c-fg); font-size: var(--text-sm); cursor: pointer;
}
:where([data-ui]) .select:hover { background-color: var(--c-surface-active); }
:where([data-ui]) .select--sm { height: var(--control-h-sm); font-size: var(--text-xs); }
:where([data-ui]) .check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-ui); cursor: pointer; }
:where([data-ui]) .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); flex: none; }
:where([data-ui]) .segmented { display: inline-flex; padding: 3px; gap: 2px; height: var(--control-h-sm); background: var(--c-surface-2); border-radius: var(--radius-control); }
:where([data-ui]) .segmented__item { position: relative; display: inline-flex; }
:where([data-ui]) .segmented__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
:where([data-ui]) .segmented__item span { display: inline-flex; align-items: center; padding-inline: 14px; border-radius: var(--radius-control); font-size: var(--text-xs); color: var(--c-fg-muted); white-space: nowrap; }
:where([data-ui]) .segmented__item input:checked + span { background: var(--c-bg); color: var(--c-fg); box-shadow: var(--shadow-sm); }
:where([data-ui]) .segmented__item span { border-radius: 6px; }
:where([data-ui]) .segmented__item input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 1px; }

/* ---- 記法の入力欄(行番号は line-numbers.js が付ける) -------------------- */
:where([data-ui]) .code-input {
  display: block; width: 100%; min-height: 280px; resize: vertical;
  padding: var(--space-3);
  border: var(--border-w) solid var(--c-border-input); border-radius: var(--radius-field);
  background: var(--c-input-bg); color: var(--c-fg);
  font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--leading-code); letter-spacing: 0; tab-size: 2;
}
:where([data-ui]) .ln-wrap { --ln-error: var(--c-danger-fg); --ln-pro: var(--c-warning-fg); color: var(--c-fg); }
:where([data-ui]) .ln-gutter {
  background: var(--c-gutter-bg); color: var(--c-fg-subtle);
  border-right-color: var(--c-border) !important;
  border-radius: calc(var(--radius-field) - 1px) 0 0 calc(var(--radius-field) - 1px);
}
:where([data-ui]) button.ln-ref { font-family: var(--font-mono); font-size: .95em; }

/* ---- 警告・お知らせ ----------------------------------------------------- */
/* 1) アイコン付きの 1 件: <div class="alert alert--warning"><svg class="icon alert__icon">…<div class="alert__content">… */
:where([data-ui]) .alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-w) solid var(--c-info-border); border-radius: var(--radius-box);
  background: var(--c-info-bg); font-size: var(--text-sm); line-height: var(--leading-ui);
}
:where([data-ui]) .alert__icon { margin-top: 2px; color: var(--c-info-fg); }
:where([data-ui]) .alert__content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where([data-ui]) .alert__title { display: flex; align-items: center; gap: 6px var(--space-2); flex-wrap: wrap; font-weight: var(--weight-medium); }
:where([data-ui]) .alert__body { color: var(--c-fg-muted); }
/* 2) 箇条書きの警告(LineNumbers.fillList が中身を作る): <ul class="notice notice--danger"> */
:where([data-ui]) .notice {
  margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 1.1em);
  border: var(--border-w) solid var(--c-info-border); border-radius: var(--radius-box);
  background: var(--c-info-bg); color: var(--c-fg); font-size: var(--text-sm); line-height: var(--leading-ui);
}
:where([data-ui]) div.notice, :where([data-ui]) p.notice { padding-left: var(--space-4); }
:where([data-ui]) .notice li + li { margin-top: 4px; }
:where([data-ui]) .notice a { font-weight: var(--weight-medium); }
:where([data-ui]) :is(.alert--warning, .notice--warning) { background: var(--c-warning-bg); border-color: var(--c-warning-border); }
:where([data-ui]) :is(.alert--warning, .notice--warning) :is(.alert__icon, .ln-ref) { color: var(--c-warning-fg); }
:where([data-ui]) :is(.alert--danger, .notice--danger) { background: var(--c-danger-bg); border-color: var(--c-danger-border); color: var(--c-danger-fg); }
:where([data-ui]) :is(.alert--danger, .notice--danger) :is(.alert__icon, .ln-ref) { color: var(--c-danger-fg); }
:where([data-ui]) :is(.alert--success, .notice--success) { background: var(--c-success-bg); border-color: var(--c-success-border); }
:where([data-ui]) :is(.alert--success, .notice--success) .alert__icon { color: var(--c-success-fg); }
/* 3) 一行の結果メッセージ */
:where([data-ui]) .msg { font-size: var(--text-xs); color: var(--c-fg-muted); line-height: var(--leading-ui); }
:where([data-ui]) .msg--ok, :where([data-ui]) .msg.ok { color: var(--c-success-fg); }   /* .msg.ok / .msg.err は各ツールの app.js が付ける旧名 */
:where([data-ui]) .msg--err, :where([data-ui]) .msg.err { color: var(--c-danger-fg); }
/* 4) トースト(画面下に一時表示) */
:where([data-ui]) .toast {
  /* left: 50% + translateX だと幅が画面の半分までに縮むので、左右 0 + margin auto で中央に置く */
  position: fixed; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 50; margin-inline: auto;
  width: fit-content; max-width: min(calc(100vw - 32px), 560px); padding: 10px 16px; border-radius: var(--radius-control); /* 2行以上になる案内もあるので、丸めすぎない */
  background: var(--c-primary); color: var(--c-on-primary); font-size: var(--text-sm); line-height: var(--leading-ui);
  box-shadow: var(--shadow-lg);
}
:where([data-ui]) .ts-toast__act { margin-left: var(--space-3); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- 面(設定のまとまりなど) ------------------------------------------- */
/* 面の箱をやめ、上の細線と余白で区切る(入力欄の中に箱が重ならないように) */
:where([data-ui]) .panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) 0 0; border-top: var(--border-w) solid var(--c-rule); border-radius: 0; background: none; }
:where([data-ui]) .panel__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-ui); }

/* ---- ヘッダー(nav.js のハンバーガーと組む: header.site / .menu-toggle / nav) -- */
:where([data-ui]) .app-header { position: relative; z-index: 10; background: var(--c-bg); }
:where([data-ui]) .app-header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); padding-inline: var(--gutter); max-width: var(--page-max-wide); margin-inline: auto; }
:where([data-ui]) .brand { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-md); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
/* ロゴ・ツール名・説明は字の大きさと書体が違うので、箱の中央ではなくベースラインで揃える */
:where([data-ui]) .app-header__title { display: flex; align-items: baseline; gap: var(--space-4); min-width: 0; }
:where([data-ui]) .brand span { color: var(--c-fg-subtle); font-weight: var(--weight-regular); }
:where([data-ui]) .app-header__sep { color: var(--c-fg-subtle); margin-inline: calc(var(--space-2) * -1); }
:where([data-ui]) .app-header__tool { font-family: var(--font-mono); font-size: var(--text-sm); white-space: nowrap; color: var(--c-fg-muted); }
:where([data-ui]) .app-header__tool:where(h1) { font-weight: 400; }
:where([data-ui]) .app-header__tool:where(h1, h2, p) { margin: 0; font-size: var(--text-sm); }
:where([data-ui]) .app-header__sub { font-size: var(--text-xs); color: var(--c-fg-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where([data-ui]) .app-nav { display: flex; gap: var(--space-1); flex: 1; min-width: 0; flex-wrap: wrap; }
:where([data-ui]) .app-nav a { padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--c-fg-muted); text-decoration: none; white-space: nowrap; }
:where([data-ui]) .app-nav a:hover { color: var(--c-fg); }
:where([data-ui]) .app-nav a[aria-current="page"] { color: var(--c-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
:where([data-ui]) .app-header__end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
:where([data-ui]) .menu-toggle { display: none; }
:where([data-ui]) .account { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-size: var(--text-sm); }
:where([data-ui]) .avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--c-surface-2); color: var(--c-fg); font-size: 11px; font-weight: var(--weight-bold); font-family: var(--font-mono); }

/* ---- ページの骨組み ----------------------------------------------------- */
:where([data-ui]) .page { flex: 1 0 auto; width: 100%; max-width: var(--page-max); margin-inline: auto; padding: var(--space-8) var(--gutter) var(--space-10); display: flex; flex-direction: column; gap: var(--space-6); }
/* ICM・エクイティの結果の表はヒーローの行に tr.hero を使うので、表の行には当てない(当てると行が縦に崩れる) */
:where([data-ui]) .hero:not(tr) { display: flex; flex-direction: column; gap: var(--space-3); padding-block: var(--space-6) var(--space-4); }
:where([data-ui]) .hero__title { font-size: var(--text-3xl); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: var(--weight-heading); text-wrap: balance; }
:where([data-ui]) .hero__lead { color: var(--c-fg-muted); font-size: var(--text-md); max-width: 34em; text-wrap: pretty; }
/* 和文の見出しと導入文は文節で折り返す(対応ブラウザだけ) */
:where([data-ui]) :is(h1, h2, .hero__lead) { word-break: auto-phrase; }
:where([data-ui]) .section-head { display: flex; align-items: baseline; gap: var(--space-3); }
:where([data-ui]) .section-head__title { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--c-fg-subtle); letter-spacing: var(--tracking-caps); }
:where([data-ui]) .section-head__meta { font-size: var(--text-xs); color: var(--c-fg-subtle); font-variant-numeric: tabular-nums; }
:where([data-ui]) .app-footer { display: flex; gap: var(--space-5); flex-wrap: wrap; width: 100%; max-width: var(--page-max); margin-inline: auto; padding: var(--space-6) var(--gutter) var(--space-8); font-size: var(--text-xs); color: var(--c-fg-subtle); }
:where([data-ui]) .app-footer a { text-decoration: none; }
:where([data-ui]) .app-footer a:hover { color: var(--c-fg); }

/* ---- ツール一覧(トップ) ------------------------------------------------
   用途ごとの見出しの下に、アイコン・名前・一言のタイル(スマホ 2 列、PC 4 列)。説明文は出さない(2026-10-24)。 */
:where([data-ui]) .page--top { gap: var(--space-5); padding-top: var(--space-5); }
:where([data-ui]) .tool-group { display: flex; flex-direction: column; gap: var(--space-2); }
:where([data-ui]) .tool-group[hidden] { display: none; }
:where([data-ui]) .tool-group__title { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--c-fg-subtle); letter-spacing: var(--tracking-caps); }
:where([data-ui]) .tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
:where([data-ui]) .tool-grid > li { display: flex; min-width: 0; }
:where([data-ui]) .tool-tile {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--space-3); border-radius: var(--radius-card); background: var(--c-surface); text-decoration: none; transition: background-color .12s;
}
:where([data-ui]) .tool-tile:hover { background: var(--c-surface-active); }
:where([data-ui]) .tool-tile:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
:where([data-ui]) .tool-tile .tool__icon { width: 24px; height: 24px; margin-bottom: var(--space-2); color: var(--c-fg-muted); }
:where([data-ui]) .tool-tile__name { max-width: 100%; font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where([data-ui]) .tool-tile__line { font-size: var(--text-xs); color: var(--c-fg-muted); line-height: 1.5; }
:where([data-ui]) .recent { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
:where([data-ui]) .recent[hidden] { display: none; }
:where([data-ui]) .recent__label { font-size: var(--text-xs); color: var(--c-fg-subtle); margin-right: var(--space-1); }
:where([data-ui]) .recent a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--space-3); border-radius: 999px; background: var(--c-surface); font-size: var(--text-sm); text-decoration: none; }
:where([data-ui]) .recent a:hover { background: var(--c-surface-active); }
:where([data-ui]) .recent svg { width: 16px; height: 16px; color: var(--c-fg-muted); }
@media (min-width: 720px) {
  :where([data-ui]) .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :where([data-ui]) .tool-tile { padding: var(--space-4); min-height: 120px; }
}
:where([data-ui]) .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where([data-ui]) .promo { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--amber-2); }
:where([data-ui]) .promo__text { flex: 1 1 18em; font-size: var(--text-sm); color: var(--c-fg-muted); }

/* ---- ツールの作業画面(入力 + プレビュー) -------------------------------- */
:where([data-ui]) .workspace { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); width: 100%; max-width: var(--page-max-wide); margin-inline: auto; }
:where([data-ui]) .pane { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--gutter); min-width: 0; }
:where([data-ui]) .pane--input { }
:where([data-ui]) .pane--preview { background: var(--c-bg-subtle); }
:where([data-ui]) .pane__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; min-height: var(--control-h-sm); }
:where([data-ui]) .pane__title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
:where([data-ui]) .pane__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
:where([data-ui]) .editor-status { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--c-fg-muted); font-variant-numeric: tabular-nums; }
:where([data-ui]) .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-fg-subtle); }
:where([data-ui]) .dot--ok { background: var(--c-ok); }
:where([data-ui]) .preview { display: flex; justify-content: center; padding: var(--space-6); border-radius: var(--radius-card); background: transparent; }
:where([data-ui]) .preview__frame { width: 100%; max-width: 960px; line-height: 0; border-radius: var(--radius-image); overflow: hidden; box-shadow: var(--shadow-image); }
:where([data-ui]) .preview__frame :where(img, svg, canvas) { width: 100%; height: auto; display: block; }

/* ---- クラスなしの <button> の既定 ----------------------------------------------
   各ツールの app.js が作るメニュー項目などの <button> にはクラスが無いことがあるので、.btn と同じ既定の見た目を付ける。
   全体を :where() で包んで詳細度を 0 にしてあるので、ページ側の指定(.my-list button / .pill など)が必ず勝つ。 */
:where([data-ui] button:not(.btn, .ln-ref, [class*="cf-"])) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); padding-inline: var(--space-4);
  border: var(--border-w) solid transparent; border-radius: var(--radius-control);
  background: var(--c-surface-2); color: var(--c-fg);
  font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color .12s, color .12s;
}
:where([data-ui] button:not(.btn, .ln-ref):hover:not(:disabled)) { background: var(--c-surface-active); }
:where([data-ui] button:not(.btn):disabled) { cursor: not-allowed; opacity: .45; }

/* ---- 画像を作るツールの共通の画面部品(/assets/tool-shell.js) ------------------
   PC: 左に入力欄・エラー・「その他」の項目(その場で開く)、右にプレビュー・切り替え・保存。
   スマホ(900px 以下): 切り替えはプレビューの下、保存のバーは画面の下に固定、「その他」はシート。 */
:where([data-ui]) .ts-hide { display: none !important; }
:where([data-ui]) .pane > .ts-panel { display: none; }
/* プレビューの下に切り替えと保存のバーを置くので、プレビューの高さはその分を空ける */
@media (min-width: 901px) { :where([data-ui]).ts #preview { max-width: calc((100vh - 250px) * var(--ar, 1)); } }
:where([data-ui]) .ts-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; width: 100%; max-width: 720px; }
:where([data-ui]) .ts-chips button { height: 40px; padding: 0 var(--space-3); border: 0; border-radius: calc(var(--radius-control) - 2px); background: transparent; color: var(--c-fg-muted); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1; }
:where([data-ui]) .ts-chips button:hover { color: var(--c-fg); }
:where([data-ui]) .ts-chips svg { width: 18px; height: 18px; flex: none; }
:where([data-ui]) .ts-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border-radius: var(--radius-control); background: var(--c-surface-2); }
:where([data-ui]) .ts-seg button { min-width: 64px; }
:where([data-ui]) .ts-seg button[aria-pressed="true"] { background: var(--c-bg); color: var(--c-fg); box-shadow: inset 0 0 0 1.5px var(--c-primary); }
:where([data-ui]) .ts-seg i { display: block; flex: none; border: 1.5px solid currentColor; border-radius: 2px; }
:where([data-ui]) .ts-chips .ts-tg { background: var(--c-surface-2); color: var(--c-fg); border-radius: var(--radius-control); }
/* 切り替えの文言は全部を重ね、今のもの(.on)だけ見せる。幅は一番長い文言で決まる */
:where([data-ui]) .ts-tg__t { display: inline-grid; }
:where([data-ui]) .ts-tg__t > span { grid-area: 1 / 1; text-align: center; visibility: hidden; }
:where([data-ui]) .ts-tg__t > .on { visibility: visible; }
:where([data-ui]) .ts-bar { display: flex; justify-content: center; gap: var(--space-2); width: 100%; max-width: 720px; }
:where([data-ui]) .ts-bar .btn { height: 44px; }
:where([data-ui]) .ts-bar svg { width: 18px; height: 18px; flex: none; }
:where([data-ui]) .ts-bar__icon { gap: 6px; }
:where([data-ui]) .ts-bar__more { display: none; }
:where([data-ui]) .ts-bar__save { min-width: 180px; font-size: var(--text-sm); }
:where([data-ui]) .ts-err { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); width: 100%; min-height: 36px; height: auto; padding: 6px var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--c-danger-bg); color: var(--c-danger-fg); font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: 1.35; text-align: left; white-space: normal; }
:where([data-ui]) .ts-err b { font-family: var(--font-mono); white-space: nowrap; }
/* 「その他」の項目。PC は入力欄の下に並べ、押すとその場で開く */
:where([data-ui]) .ts-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
:where([data-ui]) .ts-menu-slot .ts-menu { border-top: var(--border-w) solid var(--c-rule, var(--c-border)); }
:where([data-ui]) .ts-menu-slot .ts-menu__item { border-bottom: var(--border-w) solid var(--c-rule, var(--c-border)); }
:where([data-ui]) .ts-menu-slot .ts-menu__sep { display: none; }
:where([data-ui]) .ts-menu__b { width: 100%; height: 48px; justify-content: flex-start; gap: var(--space-3); padding: 0 var(--space-2); border: 0; border-radius: 0; background: transparent; color: var(--c-fg); font-size: var(--text-sm); font-weight: var(--weight-regular); }
:where([data-ui]) .ts-menu__b:hover { background: var(--c-surface-hover, var(--c-surface-2)); }
:where([data-ui]) .ts-menu__b > svg { width: 20px; height: 20px; flex: none; color: var(--c-fg-muted); }
:where([data-ui]) .ts-menu__l { flex: 1; text-align: left; }
:where([data-ui]) .ts-menu__v { color: var(--c-fg-muted); font-size: var(--text-xs); }
:where([data-ui]) .ts-menu__v:empty { display: none; }
:where([data-ui]) .ts-menu__chev { display: inline-flex; color: var(--c-fg-subtle); transition: transform .15s; }
:where([data-ui]) .ts-menu__chev svg { width: 16px; height: 16px; }
:where([data-ui]) .ts-menu__b[aria-expanded="true"] .ts-menu__chev { transform: rotate(180deg); }
:where([data-ui]) .ts-acc { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-4); }
/* パネルはツールの要素をそのまま移して出すので、見出しと区切り線は項目の名前に任せる */
:where([data-ui]) :is(.ts-acc, .ts-sheet__panel) > :is(.panel, section, div, details, label) { padding-top: 0; border-top: 0; }
:where([data-ui]) :is(.ts-acc, .ts-sheet__panel) > * > .panel__title,
:where([data-ui]) :is(.ts-acc, .ts-sheet__panel) > details > summary { display: none; }
:where([data-ui]) :is(.ts-acc, .ts-sheet__panel) > details > pre:first-of-type { margin-top: 0; }
:where([data-ui]) :is(.ts-acc, .ts-sheet__panel) > .field > :is(.field__label, .field__hint) { display: none; }
:where([data-ui]) .ts-sheet { display: none; }
@media (max-width: 900px) {
  :where([data-ui]).ts .workspace { align-content: start; }
  :where([data-ui]).ts { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  :where([data-ui]) .ts-chips { flex-wrap: nowrap; max-width: 560px; }
  :where([data-ui]) .ts-chips button { height: 44px; }
  :where([data-ui]) .ts-seg { flex: 1; }
  :where([data-ui]) .ts-seg button { min-width: 0; flex-direction: column; gap: 3px; font-size: var(--text-2xs); }
  /* アイコンの下に小さく今の状態を出す(アイコンだけだと押すまで何の切り替えか分からない) */
  :where([data-ui]) .ts-chips .ts-tg { min-width: 52px; padding: 0 6px; flex: none; flex-direction: column; gap: 3px; font-size: var(--text-2xs); }
  :where([data-ui]) .ts-chips svg { width: 20px; height: 20px; }
  :where([data-ui]) .ts-tg__t { white-space: nowrap; }
  :where([data-ui]) .ts-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: none; padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); background: var(--c-bg); border-top: var(--border-w) solid var(--c-border); }
  :where([data-ui]) .ts-bar .btn { height: 48px; }
  :where([data-ui]) .ts-bar__icon { width: 48px; padding: 0; flex: none; background: var(--c-surface-2); color: var(--c-fg); }
  :where([data-ui]) .ts-bar__icon span { display: none; }
  :where([data-ui]) .ts-bar__more { display: inline-flex; }
  :where([data-ui]) .ts-bar svg { width: 20px; height: 20px; }
  :where([data-ui]) .ts-bar__save { flex: 1; min-width: 0; font-size: var(--text-md); }
  :where([data-ui]) .ts-menu-slot { display: none; }
  :where([data-ui]) .ts-sheet { position: fixed; inset: 0; z-index: 45; display: flex; align-items: flex-end; }
  :where([data-ui]) .ts-sheet[hidden] { display: none; }
  :where([data-ui]) .ts-sheet__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .4); }
  :where([data-ui]) .ts-sheet__body { position: relative; width: 100%; max-height: 86vh; max-height: 86svh; overflow: auto; overscroll-behavior: contain; padding: var(--space-2) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--c-bg); box-shadow: var(--shadow-lg); }
  :where([data-ui]) .ts-sheet__head { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-bottom: var(--space-1); }
  :where([data-ui]) .ts-sheet__title { flex: 1; margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); }
  :where([data-ui]) .ts-sheet__head button { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--c-fg-muted); font-size: 20px; }
  :where([data-ui]) .ts-sheet__panel { display: flex; flex-direction: column; gap: var(--space-3); }
  :where([data-ui]) .ts-sheet__panel[hidden] { display: none; }
  :where([data-ui]) .ts-sheet .ts-menu__b { height: 52px; border-radius: var(--radius-control); font-size: var(--text-md); }
  :where([data-ui]) .ts-sheet .ts-menu__b > svg { width: 22px; height: 22px; }
  :where([data-ui]) .ts-sheet .ts-menu__chev { display: none; }
  :where([data-ui]) .ts-sheet .ts-menu__sep { height: 1px; margin: var(--space-1) var(--space-2); background: var(--c-border); }
  :where([data-ui]).ts-sheet-open { overflow: hidden; }
  /* トーストは保存のバーの上に */
  :where([data-ui]).ts .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- 狭い幅 ------------------------------------------------------------- */
@media (max-width: 900px) {
  :where([data-ui]) .workspace { grid-template-columns: minmax(0, 1fr); }
  /* スマホではプレビューを上、入力を下に置く(今の hh2img と同じ) */
  :where([data-ui]) .pane--preview { order: -1; }
  :where([data-ui]) .pane--input { border-right: 0; }
  :where([data-ui]) .app-header__sub { display: none; }
  :where([data-ui]) .preview { padding: var(--space-3); }
}
@media (max-width: 1024px) {
  /* nav.js が .menu-ready を付けたときだけ畳む(JS なしなら折り返して全部出す)。ツールが 8 個あり、これより狭いと 2 段になる */
  :where([data-ui]) .app-header.menu-ready .app-nav { display: none; }
  :where([data-ui]) .app-header.menu-ready .menu-toggle { display: inline-flex; }
  :where([data-ui]) .app-header.menu-ready.open .app-nav {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    padding: var(--space-2) var(--gutter) var(--space-3); background: var(--c-bg); box-shadow: var(--shadow-lg);
  }
  :where([data-ui]) .app-header.open .app-nav a { padding-block: var(--space-3); font-size: var(--text-md); }
}
@media (max-width: 720px) {
  :where([data-ui]) .account__name { display: none; }
}
@media (max-width: 520px) {
  :root { --gutter: max(16px, var(--safe-x)); }
  :where([data-ui]) .page { padding-top: var(--space-6); gap: var(--space-5); }
  :where([data-ui]) .hero__title { font-size: var(--text-2xl); }
  :where([data-ui]) .hero__lead { font-size: var(--text-md); }
  :where([data-ui]) .app-header__sep, :where([data-ui]) .app-header__tool { display: none; }
  :where([data-ui]) .alert { grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 360px) {
  /* 幅 320px 未満の端末でもヘッダーの右端のボタンがはみ出さないよう、間隔を詰める */
  :where([data-ui]) .app-header__inner { gap: var(--space-2); }
  :where([data-ui]) .app-header__end { gap: 0; }
  :where([data-ui]) .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* iOS Safari は 16px 未満の入力欄にフォーカスすると拡大するので、タッチ端末では 16px にする */
@media (hover: none) and (pointer: coarse) {
  :where([data-ui]) :is(.input, .textarea, .select, .code-input) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :where([data-ui]) * { transition: none !important; animation: none !important; }
}

/* ---- ツールのページのヘッダー: ツール名でツールの一覧、右上はアカウント(nav.js が .has-switch を付ける) ---- */
:where([data-ui]) .has-switch .app-header__sub,
:where([data-ui]) .has-switch .app-header__end > :is([data-lang-toggle], [data-theme-toggle], a[href="/me/"]) { display: none; }
:where([data-ui]) .has-switch :is(.app-header__tool, .bar__title) { display: block; min-width: 0; }
:where([data-ui]) .tool-switch {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 34px; padding: 0 6px;
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--c-fg); font: inherit; cursor: pointer;
}
:where([data-ui]) .tool-switch:hover, :where([data-ui]) .tool-switch[aria-expanded="true"] { background: var(--c-surface); }
:where([data-ui]) .tool-switch:focus-visible, :where([data-ui]) .hd-acct:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
:where([data-ui]) .tool-switch > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where([data-ui]) .tool-switch__short { display: none; }
:where([data-ui]) .tool-switch .icon { width: 14px; height: 14px; flex: none; color: var(--c-fg-muted); }
:where([data-ui]) .hd-acct {
  flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center;
  background: transparent; color: var(--c-fg-muted); font: var(--weight-bold) 13px/1 var(--font-mono); cursor: pointer;
}
:where([data-ui]) .hd-acct svg { width: 20px; height: 20px; }
:where([data-ui]) .hd-acct:hover, :where([data-ui]) .hd-acct[aria-expanded="true"] { background: var(--c-surface); color: var(--c-fg); }
:where([data-ui]) .hd-acct--in { background: var(--c-surface-2); color: var(--c-fg); }
:where([data-ui]) .hd-acct--pro { box-shadow: 0 0 0 2px var(--c-pro-border); }

/* PC はボタンの下に出すドロップダウン(位置は nav.js)、スマホは下からのシート */
:where([data-ui]) .hd-sheet { position: fixed; inset: 0; z-index: 50; }
:where([data-ui]) .hd-sheet[hidden], :where([data-ui]) .hd-group[hidden], :where([data-ui]) .hd-tool[hidden] { display: none; }
:where([data-ui]) .hd-sheet__scrim { position: absolute; inset: 0; }
:where([data-ui]) .hd-sheet__body {
  position: absolute; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4);
  background: var(--c-bg); border: var(--border-w, 1px) solid var(--c-border); border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
}
:where([data-ui]) .hd-sheet__body > :is(.panel, section) { margin: 0; padding-top: 0; border-top: 0; }
:where([data-ui]) .hd-group__title { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 500; color: var(--c-fg-subtle); }
:where([data-ui]) .hd-group__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
:where([data-ui]) .hd-tool {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 2px 10px; border-radius: var(--radius-control);
  background: var(--c-surface); color: var(--c-fg); text-decoration: none; font-size: var(--text-2xs); line-height: 1.35; text-align: center;
  word-break: auto-phrase; /* 「ブラインドタイマー」が「ー」だけ次の行に行かないように(Safari は文字の大きさで1行に収める) */
}
:where([data-ui]) .hd-tool svg { width: 24px; height: 24px; color: var(--c-fg-muted); }
:where([data-ui]) .hd-tool:hover { background: var(--c-surface-active); }
:where([data-ui]) .hd-tool[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--c-fg); }
:where([data-ui]) .hd-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--border-w, 1px) solid var(--c-border); }
:where([data-ui]) .hd-foot > * { flex: 1; }
:where([data-ui]) .hd-foot > .hd-foot__wide { flex-basis: 100%; }
/* ホーム画面に追加の手順(nav.js の homeScreen)。PC 幅(iPad の横向き)では画面の中央に出す */
:where([data-ui]) .hs { display: flex; flex-direction: column; gap: var(--space-3); }
:where([data-ui]) .hs__title { font-size: var(--text-lg); font-weight: var(--weight-heading); }
:where([data-ui]) .hs__lead { color: var(--c-fg-muted); font-size: var(--text-sm); line-height: var(--leading-ui); }
:where([data-ui]) .hs__steps { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
:where([data-ui]) .hs__steps li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-control); background: var(--c-surface); font-size: var(--text-sm); line-height: 1.5; }
:where([data-ui]) .hs__steps small { display: block; color: var(--c-fg-subtle); font-size: var(--text-xs); }
:where([data-ui]) .hs__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-control); background: var(--c-bg); color: var(--c-fg); font-size: var(--text-xs); }
:where([data-ui]) .hs__ico svg { width: 22px; height: 22px; }
:where([data-ui]) .hs__row { display: flex; gap: var(--space-2); }
:where([data-ui]) .hs__row > * { flex: 1; }
@media (min-width: 901px) {
  :where([data-ui]) .hd-sheet--center .hd-sheet__scrim { background: rgb(0 0 0 / .4); }
  :where([data-ui]) .hd-sheet--center .hd-sheet__body { top: 50%; left: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 900px) {
  :where([data-ui]) .hd-sheet__scrim { background: rgb(0 0 0 / .4); }
  :where([data-ui]) .hd-sheet__body {
    left: 0; right: 0; bottom: 0; width: 100%; max-height: 86vh; max-height: 86svh; border: 0; border-radius: var(--radius-card) var(--radius-card) 0 0;
    padding: var(--space-2) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }
  :where([data-ui]) .hd-sheet__body::before { content: ""; flex: none; align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--c-border-strong); }
  :where([data-ui]) .hd-tool { padding-block: 14px 12px; }
  :where([data-ui]) .hd-foot .btn { height: 44px; }
  .hd-sheet-open { overflow: hidden; }
}
@media (max-width: 520px) {
  /* ロゴは 27o だけにして、ツール名(短い名前)を出す */
  :where([data-ui]) .has-switch .brand span { display: none; }
  :where([data-ui]) .has-switch .app-header__sep { display: inline; }
  :where([data-ui]) .tool-switch__full { display: none; }
  :where([data-ui]) .tool-switch__short { display: inline; }
}

/* ---- プレビューの全画面表示(tool-shell.js の viewer) ---- */
:where([data-ui]) .ts-zoomable { cursor: zoom-in; }
:where([data-ui]) .ts-viewer { position: fixed; inset: 0; z-index: 60; display: flex; overflow: auto; overscroll-behavior: contain; background: rgb(0 0 0 / .88); }
:where([data-ui]) .ts-viewer__in { margin: auto; padding: calc(56px + env(safe-area-inset-top, 0px)) 12px calc(24px + env(safe-area-inset-bottom, 0px)); }
:where([data-ui]) .ts-viewer img { display: block; max-width: calc(100vw - 24px); max-height: calc(100vh - 96px); max-height: calc(100svh - 96px); border-radius: 6px; cursor: zoom-in; }
:where([data-ui]) .ts-viewer.zoom img { max-width: none; max-height: none; width: min(2400px, 250vw); cursor: zoom-out; }
:where([data-ui]) .ts-viewer__x { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; font-size: 18px; cursor: pointer; }