/* =========================================================
   その場投票 固有スタイル
   読み順: tokens.css → ui.css → 本ファイル。
   ★器と:rootトークンはlib(tokens.css/ui.css)から。ここに書くのは
     ①[data-brand="vote"]の色ブロック(製品の肌=深いティール)
     ②ヒーロー実演デモのアニメ
     ③部屋ページ(議案カード・投票ボタン・結果バー)
   ★新しい生pxを作らずトークン参照(香林UIデザイン§1)。
   ========================================================= */

/* --- ① 製品アイデンティティ(骨格は共通・肌で個性) ---
   意味色の緑 --ok(#2e7d32)と混同しないよう、ブランドは青緑(ティール)に振る。
   可決バッジ等の意味色 --ok系は変えない。 */
[data-brand="vote"]{
  --primary:#00695c; --primary-d:#004d40; --primary-l:#e0f2f1; --bd-primary:#b2dfdb;
  --accent:#00796b; --accent-d:#004d40; --accent-l:#e0f2f1;
  --hero-2:#0b4f45; --hero-3:#062f29; --hero-ink:#d9ece8;
  --motif:"✓";
}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary-d);color:#fff;
  padding:var(--sp-2) var(--sp-4);z-index:var(--z-skiplink);border-radius:0 0 var(--r-md) 0}
.skip-link:focus{left:0}
.wrap.narrow{max-width:var(--maxw-narrow)}

/* --- ② ヒーロー実演デモ:採決バーが伸びて「可決」が出る(自己完結SVG/CSS・画像なし) ---
   バーは単一色相(--primary)。可決バッジのみ意味色--ok(色+チェック印の二重伝達)。 */
.vt-bar{transform-box:fill-box;transform-origin:left center;
  animation:vt-grow 7s var(--ease-in) infinite}
.vt-bar.b2{animation-name:vt-grow2}
.vt-bar.b3{animation-name:vt-grow3}
.vt-num{opacity:0;animation:vt-show 7s steps(1,end) infinite}
@keyframes vt-grow {0%{transform:scaleX(0)}10%{transform:scaleX(.2)}45%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes vt-grow2{0%{transform:scaleX(0)}15%{transform:scaleX(.4)}45%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes vt-grow3{0%{transform:scaleX(0)}20%{transform:scaleX(.5)}45%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes vt-show {0%,44%{opacity:0}45%,100%{opacity:1}}
.vt-passed{transform-box:fill-box;transform-origin:center;
  animation:vt-pop 7s var(--ease-in) infinite}
@keyframes vt-pop{0%,54%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1.04)}66%,100%{opacity:1;transform:scale(1)}}
/* 常時アニメは reduced-motion で停止(正本§5)。停止時は「完成状態」で静止 */
@media (prefers-reduced-motion:reduce){
  .vt-bar,.vt-num,.vt-passed{animation:none;opacity:1;transform:none}
}

/* ---------- 作成ページ ---------- */
.url-box{display:flex;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-3)}
.url-box .btn{white-space:nowrap;flex:0 0 auto}
.url-box input{flex:1 1 auto;min-width:0;max-width:100%;font-size:16px;min-height:var(--tap-min);
  font-family:ui-monospace,Consolas,monospace;background:var(--bg-subtle)}
.result-dlg{border:none;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:var(--sp-5);
  max-width:var(--maxw-card);width:92vw}
.result-dlg::backdrop{background:rgba(0,0,0,.4)}

/* ---------- 部屋ページ:共通 ---------- */
.room-topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-3)}
.room-title{font-size:var(--fs-2xl);font-weight:700;color:var(--text)}
.room-badges{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.att-badge{background:var(--bg-subtle);border:var(--bw) solid var(--line-strong);color:var(--text);
  border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4);font-size:var(--fs-md);font-weight:700}
.quorum-badge{background:var(--bg-subtle);border:var(--bw) solid var(--line-strong);color:var(--muted);
  border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4);font-size:var(--fs-md);font-weight:700}
.quorum-badge.met{background:var(--ok-bg);border-color:#bcd9be;color:var(--ok-text)}

.snackbar{position:fixed;bottom:var(--fab-offset);left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--neutral-d);color:#fff;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);
  font-size:var(--fs-md);z-index:var(--z-toast);opacity:0;transition:transform var(--dur-in) var(--ease-in),opacity var(--dur-in);
  box-shadow:var(--shadow-lg);max-width:92vw}
.snackbar.show{transform:translateX(-50%) translateY(0);opacity:1}
.loading-text{color:var(--muted);font-size:var(--fs-md);padding:var(--sp-4) 0;text-align:center}
.intent-done{color:var(--ok-text);font-weight:700;font-size:var(--fs-md)}

/* ---------- 議長画面 ---------- */
.org-grid{display:grid;grid-template-columns:minmax(var(--col-min),320px) 1fr;gap:var(--sp-4);align-items:start}
.qr-card .qr-frame{margin:0 auto var(--sp-2);max-width:232px}
.motions-head{display:flex;align-items:center;gap:var(--sp-3)}
.motions-head h2{font-size:var(--fs-lg);font-weight:700;margin:0;flex:0 1 auto}
.motion-count{color:var(--muted);font-size:var(--fs-sm);font-weight:600;flex:1 1 auto}
.motion-list{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4) var(--sp-4)}
.motions-card{padding:0}
.motions-card .card-h{margin:0;padding:var(--sp-3) var(--sp-4)}

.motion{border:var(--bw) solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
  background:var(--surface)}
.motion.open{border:var(--bw-2) solid var(--primary);background:var(--surface)}
.motion-h{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.motion-title{font-weight:700;font-size:var(--fs-lg);color:var(--text);flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.st-badge{border-radius:var(--r-pill);padding:0 var(--sp-3);font-size:var(--fs-sm);font-weight:700;
  min-height:var(--pill-h);display:inline-flex;align-items:center;white-space:nowrap}
.st-badge.draft{background:var(--bg-subtle);color:var(--muted);border:var(--bw) solid var(--line-strong)}
.st-badge.open{background:var(--primary);color:#fff}
.st-badge.closed{background:var(--surface);color:var(--muted);border:var(--bw) solid var(--line-strong)}
.m-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.m-proxy-note{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}

.pro-note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);justify-content:flex-end;
  margin-top:var(--sp-3)}
.pn-txt{font-size:var(--fs-sm);color:var(--muted)}

/* 議案ダイアログ */
.motion-dlg{border:none;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:var(--sp-5);
  max-width:var(--maxw-card);width:92vw}
.motion-dlg::backdrop{background:rgba(0,0,0,.4)}
.motion-dlg h2{font-size:var(--fs-xl);margin-bottom:var(--sp-4)}
.field-label{display:block;font-size:var(--fs-sm);color:var(--muted);font-weight:700;margin-bottom:var(--sp-1)}
.radio-opt-row{display:flex;flex-direction:column;gap:var(--sp-2)}
.radio-opt{display:flex;gap:var(--sp-2);align-items:flex-start;border:var(--bw) solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);cursor:pointer}
.radio-opt:has(input:checked){border-color:var(--primary);background:var(--primary-l)}
.radio-opt input{margin-top:3px;width:var(--check);height:var(--check);accent-color:var(--primary)}
.radio-opt .muted{display:block;font-size:var(--fs-sm);font-weight:400}
.dlg-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4)}

/* ---------- 結果バー(単一色相・直接ラベル。識別は行ラベルの文字で行う) ---------- */
.res-rows{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.res-row{display:grid;grid-template-columns:minmax(56px,max-content) 1fr max-content;gap:var(--sp-2);
  align-items:center}
.res-label{font-size:var(--fs-md);color:var(--text);font-weight:600;overflow-wrap:anywhere}
.res-bar-wrap{background:var(--bg-subtle);border-radius:var(--r-sm);height:14px;min-width:40px}
.res-bar{background:var(--primary);border-radius:var(--r-sm);height:14px;min-width:0;
  transition:width var(--dur-in) var(--ease-in)}
.res-num{font-size:var(--fs-md);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;
  text-align:right;min-width:2.5em}
.res-sub{grid-column:2 / 4;font-size:var(--fs-sm);color:var(--muted);margin-top:-2px}
.res-total{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-2)}

.decision-badge{display:inline-flex;align-items:center;gap:var(--sp-1);border-radius:var(--r-pill);
  padding:var(--sp-half) var(--sp-3);font-size:var(--fs-md);font-weight:800;white-space:nowrap}
.decision-badge.passed{background:var(--ok-bg);color:var(--ok-text);border:var(--bw) solid #bcd9be}
.decision-badge.rejected{background:var(--warn-bg);color:var(--warn);border:var(--bw) solid #eec3bf}
.decision-badge.top{background:var(--primary-l);color:var(--primary-d);border:var(--bw) solid var(--bd-primary)}
.decision-note{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
/* 定足数未達・投票0票の併記。結果バッジの真横に置き、緑バッジだけが見える状態を作らない */
/* ★枠線は --bd-amber(淡)だと白地に対し1.56:1で W1.4.11(3:1)未達。--amber-d なら3.79:1。
   淡い枠線は「意味を持たない装飾」用。警告の境界には使わない(コントラスト検査で検出) */
.decision-warn{font-size:var(--fs-md);font-weight:700;color:var(--amber-text);background:var(--amber-bg);
  border:var(--bw) solid var(--amber-d);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);
  margin-top:var(--sp-2)}
/* 「出席」の定義注記(サーバー描画・常時表示)。JSが動かなくても必ず出る */
.att-note{font-size:var(--fs-sm);color:var(--muted);margin:calc(var(--sp-1) * -1) 0 var(--sp-3);line-height:1.6}

/* ---------- 出席者画面 ---------- */
.join-state{text-align:center}
.join-err{max-width:var(--maxw-card);margin:0 auto}
.vote-area{max-width:var(--maxw-card);margin:0 auto}
.vote-motion-title{font-size:var(--fs-xl);font-weight:700;color:var(--text);text-align:center;
  margin:var(--sp-4) 0 var(--sp-2);overflow-wrap:anywhere}
.vote-hint{text-align:center;color:var(--muted);font-size:var(--fs-md);margin-bottom:var(--sp-4)}
.vote-opts{display:flex;flex-direction:column;gap:var(--sp-3)}
.vote-btn{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--fab-h);
  padding:var(--sp-3) var(--sp-4);border:var(--bw-2) solid var(--line-strong);border-radius:var(--r-lg);
  background:var(--surface);font-family:inherit;font-size:var(--fs-xl);font-weight:700;color:var(--text);
  cursor:pointer;text-align:left;transition:var(--transition)}
.vote-btn:hover{border-color:var(--primary);background:var(--primary-l)}
.vote-btn:active{transform:translateY(1px)}
.vote-btn:disabled{opacity:.5;cursor:default;transform:none}
.vote-btn .vb-mark{flex:0 0 auto;width:var(--icon-lg);text-align:center;color:var(--muted)}
.vote-btn.sel{border-color:var(--primary);background:var(--primary-l);color:var(--primary-d)}
.vote-btn.sel .vb-mark{color:var(--primary-d)}
.vote-btn .vb-check{margin-left:auto;color:var(--primary-d);font-weight:800;visibility:hidden}
.vote-btn.sel .vb-check{visibility:visible}
.voted-note{text-align:center;color:var(--ok-text);font-weight:700;margin-top:var(--sp-3)}
.waiting-card{max-width:var(--maxw-card);margin:0 auto;text-align:center;background:var(--surface);
  border:var(--bw) solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);
  padding:var(--sp-6) var(--sp-4)}
.waiting-card .w-ic{font-size:var(--fs-7xl);color:var(--primary);display:block;margin-bottom:var(--sp-2)}
.closed-area{max-width:var(--maxw-legal);margin:var(--sp-5) auto 0}
.closed-h{font-size:var(--fs-lg);font-weight:700;color:var(--muted);margin-bottom:var(--sp-2)}
.closed-item{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}

/* ---------- LP ---------- */
.cta-box{background:var(--primary-l);border:var(--bw) solid var(--bd-primary);border-radius:var(--r-md);
  padding:var(--sp-5);text-align:center;margin:var(--sp-5) 0}
.cta-box p{font-weight:700;margin-bottom:var(--sp-3)}

/* ---------- モバイル(横スクロールを出さない) ---------- */
@media (max-width:768px){
  .org-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .room-topbar{flex-direction:column;align-items:flex-start}
  .motion-dlg,.result-dlg{width:96vw;padding:var(--sp-4)}
  .m-actions .btn{flex:1 1 auto}
}