/* Team Lens 共通スタイル。トークンは team_lens/group_convening.html の :root を正とする。 */
*,*::before,*::after{box-sizing:border-box}
:root{
--paper:#F3EEE4; --paper2:#FBF8F1; --card:#FFFFFF;
--side:#E8E3D9; /* 左ナビ背景：本文(--paper)と同色相のまま僅かに深く。一体感を保ちつつ面を分ける */
--ink:#1C1A16; --ink2:#5A554B; --ink3:#938C7C;
--line:#E6DECE; --line2:#D6CDB9;
--gold:#B0882A; --gold-dk:#8A6A1F;
--navy:#1d2942; --navy2:#33415c;
--qa:#4A7BA6; --qb:#7A5AA0; --qg:#C6803A; --qd:#5E8C6A;
--c-high:#5E8C6A; --c-good:#C6803A; --c-mid:#7C93AB; --c-low:#BCAE94; --c-warn:#B23A48;
--serif:'Cormorant Garamond',serif; --disp:'Cinzel',serif;
--sans:'Jost','Noto Sans JP',sans-serif; --jp:'Noto Sans JP',sans-serif; --mono:'Space Mono',monospace;
}
body.tl{font-family:var(--jp);background:var(--paper);color:var(--ink);line-height:1.8;font-size:15px;
background-image:radial-gradient(circle at 1px 1px,rgba(28,26,22,.03) 1px,transparent 0);background-size:24px 24px;
-webkit-font-smoothing:antialiased;margin:0}
.tl-wrap{max-width:1120px;margin:0 auto;padding:0 26px 120px}
@media(max-width:680px){.tl-wrap{padding:0 14px 90px}}
/* 画面内ガイド（コーチマーク・team-tour.js） */
.tlt-hi{position:relative;z-index:9001;border-radius:10px;box-shadow:0 0 0 3px var(--gold),0 0 0 9999px rgba(20,18,14,.55);transition:box-shadow .2s}
.tlt-tip{position:absolute;z-index:9002;width:330px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:16px 18px;box-shadow:0 10px 34px rgba(0,0,0,.28)}
.tlt-tip h4{margin:3px 0 7px;font-family:var(--disp);font-size:16px;color:var(--ink)}
.tlt-tip p{margin:0 0 13px;font-size:13px;color:var(--ink2);line-height:1.8}
.tlt-step{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--gold-dk)}
.tlt-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tlt-b{font-family:var(--sans);font-size:13px;padding:7px 15px;border-radius:20px;border:1px solid var(--line2);background:#fff;color:var(--ink2);cursor:pointer;text-decoration:none}
.tlt-b.primary{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.tlt-b.ghost{border:none;color:var(--ink3);margin-left:auto}
/* セクション別の同意・評価（self / leader） */
.rate{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:11px}
.rate .rate-q{font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--ink3);margin-right:2px}
.rate-opt input{position:absolute;opacity:0;width:0;height:0}
.rate-opt label{display:inline-block;cursor:pointer;border:1px solid var(--line2);border-radius:20px;padding:5px 11px;font-size:12px;color:var(--ink2);background:var(--paper2)}
.rate-opt input:checked + label{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.rate-opt input:focus + label{outline:2px solid var(--gold);outline-offset:1px}
.rate-show{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;margin-top:8px}
.rate-pill{display:inline-block;border-radius:20px;padding:2px 10px;font-size:12px;color:#fff}
.rate-self{background:var(--gold-dk)}
.rate-leader{background:var(--navy2)}
/* 全体ダッシュボード（team/index.php） */
.dash-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.dash-kpis .kpi{flex:1 1 110px;background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:14px 16px;text-align:center}
.kpi-n{display:block;font-family:var(--disp);font-size:24px;font-weight:600;color:var(--ink);line-height:1.1}
.kpi-n small{font-size:13px;color:var(--ink3);font-family:var(--jp)}
.kpi-l{display:block;font-size:11px;color:var(--ink3);margin-top:4px}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.dash-card{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:11px}
.dash-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dash-card-h strong{font-size:15px}
.dash-mood p{font-size:13.5px;line-height:1.7;margin:0}
.dash-pulse{display:flex;align-items:center;gap:8px;font-size:13px}
.dash-dot{width:10px;height:10px;border-radius:50%;flex:none}
.dash-links{display:flex;gap:8px;margin-top:auto;padding-top:2px}
/* 共通左ナビ（team/_nav.php） */
.tl-side{position:fixed;top:0;left:0;bottom:0;width:200px;background:var(--side);border-right:1px solid var(--line2);
padding:16px 12px;z-index:60;overflow-y:auto;transition:transform .2s ease}
.tl-side-brand{font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.02em;padding:4px 10px 13px;border-bottom:1px solid var(--line);margin-bottom:10px}
.tl-side-brand small{display:block;font-family:var(--sans);font-weight:400;font-size:8.5px;letter-spacing:.22em;color:var(--ink3);text-transform:uppercase;margin-top:2px}
.tl-side a{display:flex;align-items:center;padding:9px 12px 9px 11px;border-radius:8px;font-family:var(--jp);font-size:13.5px;line-height:1.35;white-space:nowrap;color:var(--ink);text-decoration:none;margin-bottom:2px;transition:background .15s,color .15s,box-shadow .15s}
/* 各メニューに固有の宝石（◆＝--gem 色）。通常は控えめ、ホバー/選択で灯る。 */
.tl-side a::before{content:"◆";color:var(--gem,var(--gold));font-size:7px;margin-right:9px;opacity:.42;transition:opacity .15s,font-size .15s,text-shadow .15s;flex:0 0 auto}
.tl-side a:hover{background:rgba(176,136,42,.08);color:var(--ink);text-decoration:none}
.tl-side a:hover::before{opacity:.8}
.tl-side a.on{background:linear-gradient(90deg,color-mix(in srgb,var(--gem,var(--gold)) 16%,transparent),transparent 66%);color:var(--navy);font-weight:600;box-shadow:inset 3px 0 0 var(--gem,var(--gold))}
.tl-side a.on::before{opacity:1;text-shadow:0 0 5px color-mix(in srgb,var(--gem) 70%,transparent)}
.tl-side-org{display:flex;align-items:center;gap:7px;font-family:var(--jp);font-size:12px;color:var(--ink2);padding:0 11px 11px;margin-bottom:8px;border-bottom:1px solid var(--line);line-height:1.4}
.tl-side-org .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.tl-side-logout{margin-top:14px;padding-top:13px;border-top:1px solid var(--line2);opacity:.7}
.tl-side-logout::before{display:none}
/* 言語トグル（JP/EN） */
.tl-side-lang{display:flex;gap:6px;margin:12px 11px 4px}
.tl-side-lang a{flex:1;justify-content:center;padding:5px 0;font-family:var(--sans);font-size:11px;letter-spacing:.08em;border:1px solid var(--line2);border-radius:6px;color:var(--ink2);margin:0}
.tl-side-lang a::before{display:none}
.tl-side-lang a:hover{background:transparent;color:var(--ink)}
/* 汎用 body.tl .tl-side a.on{color:navy}（高詳細度）に負けないよう !important で白文字を担保 */
.tl-side-lang a.on{background:var(--navy);color:var(--paper)!important;border-color:var(--navy);font-weight:600}
.tl-side-lang a.on:hover{background:var(--navy);color:var(--paper)!important}
.tl-burger{display:none;position:fixed;top:10px;left:10px;z-index:70;width:40px;height:40px;border-radius:9px;border:1px solid var(--line2);background:var(--paper2);color:var(--ink);cursor:pointer;font-size:18px;line-height:1}
.tl-side-back{display:none}
@media(min-width:861px){
body.tl:has(.tl-side),body.tl.tl-has-nav{padding-left:200px}
/* ナビ表示時は本文を中央寄せにせず左に寄せる（ナビとの間の余白が開きすぎるのを防ぐ） */
body.tl:has(.tl-side) .tl-wrap,body.tl.tl-has-nav .tl-wrap,
body.tl:has(.tl-side) .tl-topbar-inner,body.tl.tl-has-nav .tl-topbar-inner{margin-left:0}
}
@media(max-width:860px){
.tl-side{transform:translateX(-100%);box-shadow:2px 0 18px rgba(0,0,0,.14)}
body.tl.tl-nav-open .tl-side{transform:none}
body.tl.tl-nav-open .tl-side-back{display:block;position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:55}
.tl-burger{display:block}
.tl-topbar-inner{padding-left:58px}
}
.tl-topbar{position:sticky;top:0;z-index:40;background:rgba(251,248,241,.93);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.tl-topbar-inner{max-width:1120px;margin:0 auto;padding:11px 26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tl-brand{font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.02em}
.tl-brand small{display:block;font-family:var(--sans);font-weight:400;font-size:8.5px;letter-spacing:.22em;color:var(--ink3);text-transform:uppercase}
/* 左ナビにロゴがある時は、トップバーの「Team Lens」を重複させない（ページ名の小ラベルだけ残す） */
body.tl-has-nav .tl-brand{font-size:0;letter-spacing:0}
body.tl-has-nav .tl-brand small{font-size:9px}
.tl-spacer{flex:1}
.tl-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--ink2);background:var(--paper);border:1px solid var(--line2);border-radius:30px;padding:5px 12px}
.tl-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--c-high)}
.tl-hero{padding:18px 0 13px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tl-eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.tl-hero h1{font-family:var(--disp);font-weight:600;font-size:clamp(21px,2.8vw,28px);line-height:1.12;letter-spacing:.02em;margin:0}
.tl-hero .lede{font-family:var(--serif);font-style:italic;font-size:clamp(13.5px,1.5vw,15.5px);line-height:1.6;color:var(--ink2);max-width:none;margin-top:7px}
/* 補助線ラベル（原則②） */
.tl-aux{display:inline-block;font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;color:var(--gold-dk);
background:var(--paper2);border:1px solid var(--line2);border-radius:20px;padding:2px 10px}
.tl-section{margin:30px 0}
.tl-section h2{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:.02em;margin:0 0 4px;
display:flex;align-items:center;gap:10px}
.tl-section .desc{font-size:13px;color:var(--ink2);margin:0 0 16px}
.tl-card{background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:20px 22px;margin-bottom:18px}
.tl-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.tl-table th,.tl-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.tl-table th{font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);background:var(--paper2)}
.tl-table tr:last-child td{border-bottom:none}
.tl-masked{font-family:var(--mono);color:var(--ink3);letter-spacing:.1em}
.tl-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.tl-form label{display:flex;flex-direction:column;gap:4px;font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--ink2)}
.tl-form input,.tl-form select{font-family:var(--jp);font-size:14px;padding:8px 11px;border:1px solid var(--line2);border-radius:7px;background:#fff;color:var(--ink);min-width:160px}
.tl-btn{font-family:var(--sans);font-size:13px;letter-spacing:.04em;padding:9px 18px;border:none;border-radius:30px;background:var(--navy);color:var(--paper);cursor:pointer}
.tl-btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--navy2)}
.tl-btn.sm{padding:5px 12px;font-size:12px}
.tl-notice{font-size:13px;padding:11px 15px;border-radius:8px;margin-bottom:16px}
.tl-notice.ok{background:#eef4ef;border:1px solid var(--c-high);color:#2f5840}
.tl-notice.warn{background:#fbeeef;border:1px solid var(--c-warn);color:#7a2630}
.tl-role{display:inline-block;font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:5px;border:1px solid var(--line2);color:var(--ink2);background:var(--paper2)}
.tl-tabs{display:inline-flex;border:1px solid var(--line2);border-radius:30px;overflow:hidden;background:var(--paper);margin:18px 0 8px}
.tl-tabs a{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;padding:8px 18px;color:var(--ink2);text-decoration:none}
.tl-tabs a.on{background:var(--navy);color:var(--paper)}
.tl-muted{color:var(--ink3);font-size:12.5px}
body.tl a:not(.tl-btn){color:var(--gold-dk);text-decoration:none}
body.tl a:not(.tl-btn):hover{text-decoration:underline}
/* サイドナビ選択中：淡い金地＋金の宝石アクセント。文字は紺で判読可に。 */
body.tl .tl-side a.on{color:var(--navy)}
body.tl .tl-side a.on:hover{text-decoration:none}
body.tl .tl-tabs a.on{color:var(--paper)}
/* 解説文のマークアップ（functions.php の replaceNewline と対） */
.tl-prose{font-size:14px;line-height:1.95;color:var(--ink)}
.tl-prose .em-marker{background:linear-gradient(transparent 58%,#F2E4B8 58%);padding:0 2px;font-weight:600;color:var(--ink)}
.tl-prose .em-underline{border-bottom:2px solid var(--navy2);padding-bottom:1px}
.tl-prose .em-underline-gold{border-bottom:2px solid var(--gold);padding-bottom:1px}
.tl-prose strong{font-weight:700}
/* 星座図＋アドバイスパネル */
.tl-constel{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.tl-constel .cstage{flex:1 1 380px;min-width:300px;margin:0}
.tl-constel .tl-cpanel{margin:0}
.tl-cpanel{flex:1 1 280px;min-width:260px;background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:18px 20px}
.tl-cpanel .ph{color:var(--ink3);font-size:13px}
.tl-cpanel h3{font-family:var(--disp);font-size:19px;margin:0 0 8px;display:flex;align-items:center;gap:9px}
.tl-cpanel .gz{display:grid;grid-template-columns:74px minmax(70px,1fr) minmax(72px,auto);gap:9px;align-items:center;font-size:12px;margin:4px 0}
.tl-cpanel .gz .bar{height:7px;border-radius:5px;background:var(--line);overflow:hidden}
.tl-cpanel .gz .bar i{display:block;height:100%;border-radius:5px;background:var(--c-mid)}
@media(max-width:640px){.tl-pair-dynamics{grid-template-columns:1fr!important}.tl-cpanel .gz{grid-template-columns:66px minmax(48px,1fr) minmax(66px,auto);gap:6px}}
svg .node{cursor:pointer;pointer-events:all}
svg .hit{cursor:pointer;pointer-events:stroke}
svg .node:hover circle{stroke:var(--gold);stroke-width:3}
/* ══ 共通部品 追加（2026-07-06 UI改善: ゲージ/アバター/入力/ステッパー/公開範囲/検索/積み上げバー）══ */
.tl-icon{display:inline-block;vertical-align:-2px;flex:0 0 auto}
/* 統一ゲージ: 62 */
.tl-gauge{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
.tl-gauge .tk{position:relative;width:90px;height:6px;border-radius:4px;background:var(--line);overflow:hidden;flex:0 0 auto}
.tl-gauge .tk i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--gold)}
.tl-gauge .n{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.tl-gauge.sm .tk{width:56px;height:5px}
.tl-gauge.grow .tk{flex:1 1 auto;width:auto}
/* 顔アバター円 */
.tl-avatar{border-radius:50%;object-fit:cover;border:2px solid var(--line2);flex:0 0 auto;background:var(--paper2)}
.tl-avatar.sm{width:32px;height:32px}.tl-avatar.md{width:40px;height:40px}.tl-avatar.lg{width:56px;height:56px}
/* フォーム共通 */
.tl-field{display:flex;flex-direction:column;gap:4px;font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--ink2)}
.tl-input{font-family:var(--jp);font-size:14px;padding:8px 11px;border:1px solid var(--line2);border-radius:7px;background:#fff;color:var(--ink)}
.tl-input:focus{outline:none;border-color:var(--gold)}
/* 3点ステッパー（招待→登録→診断） */
.tl-steps{display:inline-flex;align-items:center;font-family:var(--sans);font-size:10px;letter-spacing:.04em;color:var(--ink3);white-space:nowrap}
.tl-steps .st{display:inline-flex;align-items:center;gap:4px}
.tl-steps .st .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line2);background:var(--paper2);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.tl-steps .st.done .dot{background:var(--gold);border-color:var(--gold)}
.tl-steps .st.cur .dot{border-color:var(--gold)}
.tl-steps .st.done{color:var(--gold-dk)}
.tl-steps .bar{width:16px;height:1.5px;background:var(--line2);margin:0 4px}
.tl-steps .bar.done{background:var(--gold)}
/* 公開範囲バッジ */
.tl-vis{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:10px;letter-spacing:.05em;color:var(--ink3);border:1px solid var(--line);border-radius:20px;padding:1px 8px 1px 6px;background:var(--paper2);vertical-align:middle}
.tl-vis.hr{color:var(--gold-dk);border-color:var(--line2)}
.tl-vis.self{color:#2f5840}
/* 検索窓（虫めがね内蔵） */
.tl-searchbox{position:relative;display:inline-flex;align-items:center}
.tl-searchbox .tl-icon{position:absolute;left:9px;color:var(--ink3);pointer-events:none}
.tl-searchbox .tl-input{padding-left:30px}
/* 100%積み上げ横棒（偏り表示） */
.tl-stack{display:flex;height:18px;border-radius:5px;overflow:hidden;border:1px solid var(--line2);background:var(--paper2)}
.tl-stack i{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:#fff;min-width:0;overflow:hidden;text-shadow:0 0 3px rgba(0,0,0,.25)}
.tl-stack-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--ink2);margin-top:5px}
.tl-stack-legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
/* .tl-tabs の button 版（reco 等。a と同じ見た目） */
.tl-tabs button{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;padding:8px 18px;color:var(--ink2);background:transparent;border:none;cursor:pointer}
.tl-tabs button.on{background:var(--navy);color:var(--paper)}
/* 選択ピル（ヒアリング等のラジオ）: