/* app.css — 管理画面の共通スタイル（task#15）。スマホで片手で読める1列が基本（設計書§4）
   ★iOS Safari・Android Chrome の両方で動くプロパティだけを使う */
:root {
  --bg: #f5f6f8;
  --card: #fff;
  --text: #1f2328;
  --muted: #6a737d;
  --line: #dfe3e8;
  --accent: #2f6fb3;
  --danger: #c0392b;
  --band: #fdecea;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* ★見る人は社長＝**Windows**（Yuki 2026-09-21）。前の指定は Mac 用のフォントしか並んでおらず、
     Windows では日本語も絵文字もブラウザ任せだった。
     並べ方の決まり：①各OSの標準の日本語フォント → ②最後に絵文字フォント。
     絵文字フォントを最後に置くのが要点＝日本語フォントに無い字（絵文字）だけがそちらに回る
     （先頭に置くと数字や記号まで絵文字フォントで出てしまう）。 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
               "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
main { max-width: 760px; margin: 0 auto; padding: 12px 16px 40px; }
a { color: var(--accent); }

.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: #1f2a37; color: #fff;
}
.top .brand { font-weight: 700; }
.top .logout { margin-left: auto; }
.top .btn-link { color: #cfd8e3; }

/* ---- 左のメニュー（task#19）。スマホは「☰ メニュー」で開閉、幅900px以上は常に左に出す
   ★開閉は JavaScript を使わずチェックボックス＋CSS（CSP で script を書かないため）
   ★チェックボックスは display:none にしない（隠すとキーボードで押せない端末がある）＝見えない所に置く */
.menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.menu-btn { cursor: pointer; padding: 6px 10px; margin: -6px 0 -6px -6px; border-radius: 6px; }
.menu-toggle:focus-visible + .top .menu-btn { outline: 2px solid #fff; }
.side { display: none; background: #fff; border-bottom: 1px solid var(--line); }
.menu-toggle:checked ~ .side { display: block; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side > ul { padding: 6px 0; }
.side a, .side summary { display: flex; align-items: center; gap: 8px; padding: 12px 20px; color: var(--text); text-decoration: none; }
.side summary { cursor: pointer; font-size: 1rem; color: var(--text); list-style: none; }
/* 開閉の印は自前で出す（display:flex にするとブラウザの印が消え、Safari と Chrome で出方も違うため） */
.side summary::-webkit-details-marker { display: none; }
.side summary::after { content: "▸"; margin-left: auto; color: var(--muted); }
.side details[open] > summary::after { content: "▾"; }
.side details ul a { padding-left: 36px; font-size: 0.95rem; }
.side a.current { background: #eaf2fb; color: var(--accent); font-weight: 700; }
.side .soon { margin-left: auto; font-size: 0.75rem; color: var(--muted); background: #eef1f5; border-radius: 999px; padding: 1px 8px; }
@media (min-width: 900px) {
  .layout { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .layout > .top { flex: 0 0 100%; }
  .menu-btn { display: none; }
  /* 押しても何も起きないチェックボックスに Tab で止まらないように（すみれ task#19 軽8） */
  .menu-toggle { visibility: hidden; }
  .side, .menu-toggle:checked ~ .side {
    display: block; flex: 0 0 220px; position: -webkit-sticky; position: sticky; top: 0;
    min-height: 100vh; border-bottom: 0; border-right: 1px solid var(--line);
  }
  .layout > .content { flex: 1 1 0; min-width: 0; }
}

/* 幅760px未満でも左右に余白を残す（すみれ task#15 軽6） */
.band, .info, .flash, .warn-line { border-radius: 8px; }
.band, .info, .flash { max-width: 760px; margin: 8px 16px 0; padding: 10px 14px; }
@media (min-width: 792px) { .band, .info, .flash { margin-left: auto; margin-right: auto; } }
/* 赤い帯の見た目（色・太さ）は1か所で持つ（task#34）＝.band はページの上に出す帯・.warn-line は
   箇条書きの中に出す1行で、違うのは置き場所と余白だけ。前は同じ色・太さを2か所に書いていたので、
   片方を直すともう片方が黙って揃わなくなる形だった。置き場所と余白の違いは下の .warn-line 側にある。
   ★ここを直すと2つとも変わる（すみれ task#34 軽）＝.band は公開画面（VPS）の帯・.warn-line は
     母艦Macだけの /trial の行。片方だけ色を変えたい時は、この行から外して単独で持たせる */
.band, .warn-line { background: var(--band); color: var(--danger); font-weight: 600; }
.info { background: #eaf2fb; color: #1d4f85; }
.flash { background: #eaf7ee; color: #1e6b35; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
.card.narrow { max-width: 420px; margin: 40px auto; }
h1 { font-size: 1.25rem; margin: 0 0 12px; }
h2 { font-size: 1.05rem; margin: 4px 0 8px; }

label { display: block; margin: 10px 0; font-size: 0.95rem; }
input[type=text], input[type=password], select {
  display: block; width: 100%; margin-top: 4px; padding: 10px;
  font-size: 16px; /* 16px 未満だと iOS が入力時に拡大する */
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text);
}
label.check { display: flex; align-items: center; gap: 8px; }
label.check input { width: 20px; height: 20px; }

.btn, .btn-link { font-size: 15px; cursor: pointer; }
.btn { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; width: 100%; padding: 12px; margin-top: 8px; }
.btn.danger { color: var(--danger); border-color: #efc4be; }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; }
form.inline { display: inline; margin: 0; }
form.sub { margin-top: 16px; text-align: center; }

.error { color: var(--danger); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters select { flex: 1 1 140px; width: auto; margin: 0; }
.filters .check { margin: 0; }
.count { margin: 4px 2px; color: var(--muted); }

.news { list-style: none; margin: 0; padding: 0; }
.news .meta, .card .meta { color: var(--muted); font-size: 0.85rem; }
/* overflow-wrap:anywhere は iOS 15.4 未満で効かない＝word-break:break-word を先に書く */
.news h2 { font-size: 1rem; margin: 4px 0; word-break: break-word; overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.tag { background: #eef1f5; border-radius: 999px; padding: 2px 10px; font-size: 0.85rem; }
/* 指で押しやすい大きさ（44px 前後） */
.tag-edit { font-size: 0.85rem; margin-left: auto; padding: 10px 14px; margin-right: -8px; }
details summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
/* 要約の試し：出どころの記事（▼で開く）。指で押しやすい高さにする（task#30） */
.srcs > summary { padding: 10px 0; font-size: 0.95rem; }
.srcs[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
details p, .summary { word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; }
.rows li > div:first-child { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
.rows li.stopped strong { color: var(--muted); }
.rows li > div:last-child { flex-shrink: 0; text-align: right; max-width: 45%; }

.pager { display: flex; justify-content: space-between; align-items: center; margin: 16px 0; }

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.9rem; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.bad td { background: var(--band); }

/* ---- ダッシュボード・除外語・取得先URL（task#19） */
.stats { display: flex; gap: 12px; }
.stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; padding: 12px; border-radius: 8px; background: #f5f8fc; text-decoration: none; color: var(--text); }
.stat-num { font-size: 1.8rem; font-weight: 700; color: var(--accent); line-height: 1.2; }
.stat-label { font-size: 0.9rem; color: var(--muted); }
.words { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.word { display: inline-flex; align-items: center; background: #eef1f5; border-radius: 999px; padding: 0 0 0 10px; font-size: 0.9rem; }
/* 指で押しやすい大きさ（44px 前後の押せる範囲） */
.word-x { background: none; border: 0; color: var(--muted); font-size: 1rem; padding: 8px 12px; cursor: pointer; }
.url { word-break: break-all; overflow-wrap: anywhere; color: var(--muted); }
/* 行の中身が1つだけ（除外語・取得先URL）の時は、右のボタン用の幅の制限を掛けない */
.rows li > div:only-child { max-width: none; text-align: left; flex-shrink: 1; }

/* ============================================================
   AI社員のチーム体制図（task#25・2026-09-20）
   ------------------------------------------------------------
   ★出どころ＝AI社員サブスク（yatoyell）の app/webroot/css/yatoyell.css の
     「チーム体制図」の節をそのまま移植した（Yuki指示＝ヤトエールと同じにして）。
     さらに元をたどると _dashboard/project_view.php の体制図（#150）。
     独自に作り直さない＝動いている同じ作りに差分最小で合わせる。
   ★この節だけダーク固定（ネオンの線と流れる●は明るい地色の上だと沈むため）。
     他の画面の色には影響しない。
   ============================================================ */

.yy-org {
    --oc-cmd: #ff77bf;      /* 指揮系統 */
    --oc-meeting: #38e1ff;  /* AI社内会議 */

    position: relative;
    overflow: hidden;
    margin: 0 0 1.5rem;
    padding: 1.4rem clamp(1rem, 3vw, 1.75rem) 1.2rem;
    border-radius: var(--yy-radius);
    color: #eaf2ff;
    background:
        radial-gradient(1200px 700px at 50% -8%, rgba(56, 225, 255, .12), transparent 60%),
        radial-gradient(900px 600px at 10% 55%, rgba(74, 163, 255, .08), transparent 60%),
        radial-gradient(900px 600px at 90% 60%, rgba(255, 143, 199, .08), transparent 60%),
        linear-gradient(160deg, #070b18 0%, #0a1024 55%, #0b0f22 100%);
    border: 1px solid rgba(120, 170, 255, .18);
}

/* 薄い方眼の背景（移植元と同じ・奥行きを出すためだけの飾り） */
.yy-org::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .35;
    background-image:
        linear-gradient(rgba(120, 170, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 170, 255, .05) 1px, transparent 1px);
    background-size: 46px 46px;
}

.yy-org__in {
    position: relative;
    z-index: 1;
}

.yy-org__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.yy-org__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #eaf2ff;
}

.yy-org__sub {
    display: block;
    margin-top: .2rem;
    font-size: .72rem;
    font-weight: 600;
    color: #8fa6c9;
}

/* 凡例＝線の色が何を表すか */
.yy-org__legend {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    font-size: .72rem;
    font-weight: 700;
    color: #cfe0ff;
}

.yy-org__legend i {
    display: inline-block;
    width: 22px;
    height: 0;
    vertical-align: middle;
    margin-right: .35rem;
}

.yy-org__legend .lg-cmd i {
    border-top: 3px solid var(--oc-cmd);
    box-shadow: 0 0 8px var(--oc-cmd);
}

.yy-org__legend .lg-meeting i {
    border-top: 3px solid var(--oc-meeting);
    box-shadow: 0 0 8px var(--oc-meeting);
}

/* 図の外枠。狭い画面ではここが横スクロールする */
.yy-org__scroll {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    /* スクロールバーのぶん、下の説明と重ならないように少し空ける */
    padding-bottom: .3rem;
}

.yy-org__stage {
    position: relative;
    /* 5枚が潰れずに並ぶ幅。これより狭い画面は横スクロールになる */
    min-width: 38rem;
    /* ★下の余白＝会議の線を通す「配線帯」。JS はこの余白の中にレーンを取る */
    padding-bottom: 5.5rem;
}

.yy-org__wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.yy-org__row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: .9rem;
    margin: 0 auto;
}

/* 社員の並びは <ul>（読み上げのため）＝箇条書きの見た目だけ消す */
.yy-org__row--staff {
    margin: 4.5rem auto 0;
    padding: 0;
    list-style: none;
}

/* <li>。flex の枠取りはここが持ち、中のリンクは枠いっぱいに広がる */
.yy-org__cell {
    display: flex;
    flex: 0 0 6.5rem;
}

/* 社長（頂点） */
.yy-org__hub {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.5rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 119, 191, .45);
    background: rgba(255, 119, 191, .08);
    box-shadow: 0 0 22px rgba(255, 119, 191, .18);
}

.yy-org__hub-icon { font-size: 1.6rem; }

.yy-org__hub-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.yy-org__boss-name {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .02em;
    /* 会社名は長くなりうるので、はみ出さずに折り返す */
    overflow-wrap: anywhere;
}

.yy-org__boss-role {
    align-self: flex-start;
    padding: .05rem .6rem;
    border-radius: 999px;
    background: var(--oc-cmd);
    color: #04121f;
    font-size: .64rem;
    font-weight: 800;
}

.yy-org__hub-note {
    font-size: .7rem;
    color: #bcd6f5;
    line-height: 1.5;
}

/* AI社員のカード */
.yy-org__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    /* 枠取りは <li>（.yy-org__cell）が持つので、ここは枠いっぱいに広がるだけ */
    flex: 1 1 auto;
    padding: .7rem .4rem .6rem;
    border-radius: 14px;
    border: 1px solid rgba(120, 170, 255, .22);
    background: rgba(10, 18, 38, .72);
    color: #eaf2ff;
    text-align: center;
    text-decoration: none;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.yy-org__card:hover,
.yy-org__card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--oc-meeting);
    box-shadow: 0 0 18px rgba(56, 225, 255, .25);
}

/*
 * ★キーボードで辿っている人の目印は outline で出す（すみれ 中4）。
 *   hover と同じ見た目（枠の色と光）だけにして outline を消していたが、
 *   それだとマウスで触っているのか今そこに居るのかが区別できないうえ、
 *   Windows のハイコントラスト表示では box-shadow も border も描かれず
 *   目印が完全に消える。持ち上がりは上の hover 側に残したまま、
 *   outline だけを別に足す。
 */
.yy-org__card:focus-visible {
    outline: 2px solid var(--oc-meeting);
    outline-offset: 2px;
}

/*
 * 顔の枠。
 * ★element/staff_face は「写真が無ければ名前の1文字目を span で返す」だけで、
 *   丸・背景・中央寄せ・文字サイズは呼び出し側が用意する契約（すみれ 高2）。
 *   暗い地の上に置くので、背景と文字色はこの節の配色に合わせる。
 */
.yy-org__face {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(120, 170, 255, .3);
    background: rgba(120, 170, 255, .12);
    line-height: 1;
}

.yy-org__face.is-initial {
    font-size: 1.5rem;
    font-weight: 700;
    color: #cfe0ff;
}

.yy-org__name {
    font-weight: 700;
    font-size: .85rem;
    line-height: 1.4;
}

.yy-org__role {
    font-size: .68rem;
    color: #8fa6c9;
}

.yy-org__foot {
    position: relative;
    z-index: 1;
    margin: .6rem 0 0;
    font-size: .72rem;
    color: #8fa6c9;
}

/* ============================================================
   AI社員のページ（task#25）＝ヤトエール（AI社員サブスク）と同じ見栄えにする
   ------------------------------------------------------------
   ★Yuki指示 2026-09-20＝「ヤトエールと全く同じに」。
     app/webroot/css/yatoyell.css の色の定義・カード・ボタン・入力欄・見本つきの選択肢・
     社員一覧の節をそのまま持ってきた（.yy-* の名前は Hiroto Base 側と重ならない）。
   ★地色や行間はページ全体に関わるので body.yy-body に閉じ込める
     ＝AI社員のページだけがヤトエールの見た目になり、ニュース側は今まで通り。
   ============================================================ */
:root {
    --yy-bg: #faf7f2;          /* 画面の地色 */
    --yy-surface: #ffffff;     /* カードの地色 */
    --yy-ink: #2f2a26;         /* 本文の文字色 */
    --yy-muted: #6f665e;       /* 補足の文字色 */
    --yy-faint: #7a7068;       /* いちばん薄い文字色 */
    --yy-line: #ddd5cb;        /* 罫線 */
    --yy-accent: #4fa3d1;      /* 主役の色（ボタン・リンク） */
    --yy-accent-dark: #3d8cb8;
    --yy-accent-soft: #eaf4fa; /* 選択中の背景 */
    --yy-ok: #1d7a4c;
    --yy-ng: #b3261e;
    --yy-radius: 12px;
    --yy-radius-s: 8px;
    --yy-shadow: 0 2px 14px rgba(0, 0, 0, .06);
}

/* このページだけヤトエールの地色・行間にする */
body.yy-body {
    background: var(--yy-bg);
    color: var(--yy-ink);
    line-height: 1.9;
}
body.yy-body a { color: var(--yy-accent-dark); }

.yy-page-title {
    margin: 0 0 .25rem;
    font-size: 1.3rem;
}

.yy-page-lead {
    margin: 0 0 1.5rem;
    color: var(--yy-muted);
    font-size: .875rem;
}

.yy-card {
    background: var(--yy-surface);
    border-radius: var(--yy-radius);
    box-shadow: var(--yy-shadow);
    padding: 1.25rem;
    margin: 0 0 1rem;
}

.yy-card__head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 0 0 .75rem;
}

.yy-card__title {
    margin: 0;
    font-size: 1rem;
}

.yy-card__note {
    font-size: .75rem;
    color: var(--yy-faint);
}

.yy-btn {
    display: inline-block;
    padding: .55rem 1.1rem;
    border: 0;
    border-radius: var(--yy-radius-s);
    background: var(--yy-accent);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.yy-btn:hover { background: var(--yy-accent-dark); }

.yy-btn--quiet {
    background: var(--yy-surface);
    border: 1px solid var(--yy-line);
    color: var(--yy-muted);
    font-weight: 400;
}

.yy-btn--quiet:hover { background: #f4efe8; }

.yy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin: 1.25rem 0 0;
}


.yy-footnote {
    margin: 1.25rem 0 0;
    color: var(--yy-faint);
    font-size: .8rem;
}

.yy-field { margin: 0 0 1.5rem; }

/* fieldset の既定の枠と余白を消して、他の入力欄と同じ見た目に揃える */
.yy-fieldset {
    padding: 0;
    border: 0;
    min-width: 0;
}

.yy-field__label {
    display: block;
    padding: 0;
    font-weight: 700;
    font-size: .95rem;
}

.yy-field__hint {
    margin: .15rem 0 .6rem;
    color: var(--yy-muted);
    font-size: .85rem;
    line-height: 1.7;
}

.yy-field__error {
    margin: .4rem 0 0;
    color: var(--yy-ng);
    font-size: .85rem;
}

.yy-input {
    width: 100%;
    /* 16px 未満だと iOS Safari が入力時に画面を拡大する。1rem を下回らせない */
    font-size: 1rem;
    font-family: inherit;
    /* 指で押しやすい高さ（44px以上） */
    min-height: 2.75rem;
    padding: .5rem .7rem;
    border: 1px solid var(--yy-line);
    border-radius: var(--yy-radius-s);
    background: var(--yy-surface);
    color: var(--yy-ink);
}

.yy-input:focus-visible {
    outline: 2px solid var(--yy-accent);
    outline-offset: 1px;
}

/* --- 選択肢（役職・性格） --- */
.yy-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .6rem;
}

.yy-choice {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    /* 指で押しやすい大きさを確保する */
    min-height: 2.75rem;
    padding: .7rem .8rem;
    border: 1px solid var(--yy-line);
    border-radius: var(--yy-radius-s);
    background: var(--yy-surface);
    cursor: pointer;
}

.yy-choice input {
    /* ラジオ自体も指で押せる大きさにする */
    width: 1.25rem;
    height: 1.25rem;
    margin: .2rem 0 0;
    flex: none;
    accent-color: var(--yy-accent);
}

/* 選んでいるものが一目で分かるようにする（色だけに頼らず枠も濃くする） */
.yy-choice:has(input:checked) {
    border-color: var(--yy-accent);
    background: var(--yy-accent-soft);
}

.yy-choice__body { display: block; }
.yy-choice__title { display: block; font-weight: 700; font-size: .95rem; }

.yy-choice__note {
    display: block;
    color: var(--yy-muted);
    font-size: .8rem;
    line-height: 1.6;
}

/* --- 在籍中の一覧 --- */
.yy-staff-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.yy-staff {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
    padding: .9rem;
    border: 1px solid var(--yy-line);
    border-radius: var(--yy-radius-s);
    background: var(--yy-surface);
}

.yy-staff__face {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #f4efe8;
    font-size: 1.6rem;
    line-height: 1;
}

/* 顔を選んでいない人（名前の1文字目を出す丸） */
.yy-staff__face.is-initial {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--yy-muted);
}

.yy-staff__body {
    display: block;
    flex: 1;
    min-width: 8rem;
}

.yy-staff__name { display: block; font-weight: 700; }

.yy-staff__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin: .1rem 0;
}

.yy-staff__note,
.yy-staff__duty {
    color: var(--yy-muted);
    font-size: .8rem;
}

.yy-staff__duty { display: block; line-height: 1.6; }

/* 一覧のボタンは指で押しやすい高さにする */
.yy-staff__edit {
    flex: none;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}

.yy-badge {
    display: inline-block;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--yy-accent-soft);
    color: #2b6a8c;
    font-size: .75rem;
    font-weight: 700;
}

/* 線と●の光り方（task#25）
   ★org.js は style="filter:…" を書かない＝このアプリの CSP は style-src 'self' で
     インラインの style 属性が止まるため。色ごとの class をここで受ける。
   ★色の値の正本は org.js の COLOR（線そのものの色）。ここは「光」の色だけを持つ。 */
.yy-org__wires .yy-org-wire.is-cmd     { filter: drop-shadow(0 0 4px rgba(255, 119, 191, .56)); }
.yy-org__wires .yy-org-wire.is-meeting { filter: drop-shadow(0 0 4px rgba(56, 225, 255, .56)); }
.yy-org__wires .yy-org-dot.is-cmd      { filter: drop-shadow(0 0 7px #ff77bf); }
.yy-org__wires .yy-org-dot.is-meeting  { filter: drop-shadow(0 0 7px #38e1ff); }

/* 顔写真（task#25）＝ヤトエールの該当箇所を移植（Yuki決定でCLAUDE.mdの画像禁止の例外にした） */
.yy-staff__face.is-photo,
.yy-team__face.is-photo,
.yy-avatar__face.is-photo,
.yy-org__face.is-photo {
    object-fit: cover;
    /* 写真は文字ではないので、文字用の余白・行間の指定を持ち込まない */
    display: block;
    padding: 0;
}

.yy-avatar__face {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    border: 1px solid var(--yy-line);
    background: var(--yy-accent-soft);
    flex: 0 0 auto;
}

.yy-avatar__face.is-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--yy-muted);
}

.yy-avatar__current {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: .75rem 0 1rem;
}

.yy-avatar__state {
    margin: 0;
    color: var(--yy-muted);
    font-size: .85rem;
}

.yy-avatar__remove {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--yy-line);
}

.yy-field__note {
    margin: .35rem 0 0;
    padding: .5rem .65rem;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--yy-ink);
    background: var(--yy-accent-soft);
    border-radius: var(--yy-radius-s);
}

/* 設定画面の顔写真の出し方（Yuki指示 2026-09-20・task#25）
   ★ここだけヤトエールと変える＝丸ではなく角丸・中央に大きく・説明は改行して下に。
     移植した .yy-avatar__* の上に重ねる形にして、元の定義は触らない（差分が見える） */
.yy-avatar__current {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
}
.yy-avatar__face {
    width: 12rem;
    height: 12rem;
    /* 丸 → 角丸 */
    border-radius: var(--yy-radius);
}
.yy-avatar__face.is-initial { font-size: 4.5rem; }
.yy-avatar__state { display: block; }

/* ============================================================
   会議（task#26）＝顔写真＋吹き出しのチャットログ風
   ------------------------------------------------------------
   ★出どころ＝_dashboard/assets/css/dashboard.css の .mt-* の節（Yuki指示 2026-09-20＝
     「http://127.0.0.1:8000/meeting.php と同じにして」）。
   ★変えた2点：
     ①向こうは色を style="--c: …" のインラインで渡すが、このアプリの CSP は style-src 'self'＝
       インラインの style 属性が止まる → 役職ごとの class（.is-secretary 等）で色を渡す。
     ②変数名を Hiroto Base に合わせた（--sub → --muted、--radius/--shadow はここで定義）。
   ★El Cielo の社員の顔・議事録は1つも持ち込まない（お客様のサーバーなので）。
     顔はこのPJの AI社員（社長が登録した写真 or 名前の1文字目）を使う。
   ============================================================ */
.mt-lead { color: var(--muted); margin: 0 0 14px; }
.mt-note {
  background: #fff8e1; border: 1px solid #f0d48a; border-left: 4px solid #e0a800;
  border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; font-size: .88rem; line-height: 1.8;
}
/* 本物の議事録（task#37 段4）：開けた＝緑／開けなかった・止まった恐れ＝赤（色だけに頼らず文頭に絵文字と文で状態を書く） */
.mt-note.is-ok { background: #eef7ee; border-color: #b9dcb9; border-left-color: #2e7d32; }
.mt-note.is-bad { background: var(--band); border-color: #efc4be; border-left-color: var(--danger); }
.mt-meta { list-style: none; margin: 0 0 14px; padding: 10px 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 18px; }
.mt-meta__k { color: var(--text); font-weight: 700; margin-right: 6px; }
.mt-sec { font-size: .95rem; font-weight: 700; color: var(--text); margin: 22px 0 10px;
  padding-left: 9px; border-left: 3px solid var(--accent); }
.mt-bubble { display: flex; gap: 12px; margin: 0 0 14px; align-items: flex-start; }
.mt-bubble__avatar { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
  background: var(--c, #ddd); border: 2px solid var(--c, #ddd); box-shadow: 0 2px 14px rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 2rem; }
.mt-bubble__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-bubble__body { flex: 1; min-width: 0; }
.mt-bubble__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 5px; font-size: .78rem; }
.mt-bubble__name { font-weight: 700; color: var(--text); font-size: .9rem; }
.mt-bubble__role { color: var(--muted); }
.mt-bubble__text { position: relative; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--c, var(--accent)); border-radius: 12px; padding: 11px 14px;
  color: var(--text); font-size: .9rem; line-height: 1.85; word-break: break-word; box-shadow: 0 2px 14px rgba(0,0,0,.06); }
/* 吹き出しの三角（顔の方を向く）。★2枚重ねにしない＝左端が3pxの色帯なので、
   白い三角だと色帯とズレて崩れて見える（出どころの Yuki実機 2026-08-19）。色帯と同じ色を1枚だけ */
.mt-bubble__text::before { content: ''; position: absolute; top: 20px; left: -13px;
  width: 0; height: 0; border: 6px solid transparent; border-right-color: var(--c, var(--accent)); }

/* 役職ごとの色（インラインの style を使わずに渡す＝CSP） */
.mt-bubble.is-secretary     { --c: #c47297; }
.mt-bubble.is-sales_manager { --c: #4fa3d1; }
.mt-bubble.is-accountant    { --c: #1d7a4c; }
.mt-bubble.is-marketer      { --c: #d98324; }
.mt-bubble.is-researcher    { --c: #7a5cc4; }

/* 顔の大きさと社長の名前（Yuki指示 2026-09-20・task#25）
   ★移植した定義は触らず上に重ねる（後から差分が見える）
   ・体制図：56px → 84px（1.5倍）
   ・一覧　：3rem(48px) → 6rem(96px)（2倍）
   ・設定　：12rem → 18rem（1.5倍） */
.yy-org__face   { width: 84px; height: 84px; }
.yy-org__face.is-initial   { font-size: 2.25rem; }
.yy-staff__face { width: 6rem; height: 6rem; }
.yy-staff__face.is-initial { font-size: 3.2rem; }
.yy-avatar__face { width: 18rem; height: 18rem; }
.yy-avatar__face.is-initial { font-size: 6.75rem; }

/* 社長の名前（「社長」のバッジの外・下に出す）
   ★バッジ（.yy-org__boss-role）の中に入れると窮屈に見えた（2026-09-20 実機で確認）ので外に出した */
.yy-org__boss-person { display: block; margin: .3rem 0 0; font-size: 1rem; font-weight: 700; color: #eaf2ff; }

/* 左のメニューの「異常あり」の印（すみれ task#25 中4）
   ★赤い帯をダッシュボードだけにしたので、どのページからでも気づける口をここに1つ残す。
     印を出すだけで中身は書かない（帯の文はダッシュボードと取得状況で読む） */
.side-warn {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1.6; vertical-align: middle;
}

/* グループ管理のタブ（ジャニーズ／K-POP）。task#32・リンクだけ＝JavaScript なし */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.tabs a {
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--text); text-decoration: none; font-size: 0.95rem;
}
.tabs a.current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.tabs a.current .muted { color: #dbe7f5; }

/* ---- 段3（task#31）：要約の枠を主役に出す */
h2.sec { font-size: 1.1rem; margin: 22px 2px 8px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.card.topic h3 { font-size: 1.05rem; margin: 2px 0 6px; word-break: break-word; overflow-wrap: anywhere; }
.card.topic .summary { margin: 0 0 8px; }
.card.topic .rows li { padding: 8px 0; }
.card.topic .rows a { word-break: break-word; overflow-wrap: anywhere; }

/* 要約は AI が書いた物だという注意書き（task#31・すみれ 高1）。いちばん目立たせたい行なので枠で囲む */
.notice-ai {
  max-width: 760px; margin: 8px 0 12px; padding: 10px 14px; border-radius: 8px;
  background: #fff8e6; border: 1px solid #f0d9a0; color: #7a5a10; font-size: 0.95rem;
}

/* 手元の試し場（/trial）で「送れていない」を知らせる行（task#33・すみれ 2巡目 軽4）。
   ★公開画面の .notice-ai（AI要約の注意書き）を使い回さない＝意味が違う物に同じ見た目を当てると、
     片方を直した時にもう片方が黙って変わる
   ★色・太さ・角の丸みは上の .band と共通（task#34）。ここに持つのは置き場所の違いだけ＝
     箇条書きの中に入る行なので余白を詰めて、字を少し小さくしている */
.warn-line { padding: 8px 12px; font-size: 0.95rem; }