/* ============================================================
   住まいあんしん倶楽部 社内ポータル ── スタイルシート v0.1
   ブランド：青#0068B5・オレンジ#F29802・Noto Sans JP（HP凍結仕様と同一）
   レイアウト：PC=左サイドバー＋マルチカラム／モバイル=下部ナビ＋1カラム
   ============================================================ */

:root{
  --blue:#0068B5; --blue-deep:#00518d; --blue-tint:#E8F2FA; --blue-hover:#005A9E;
  --orange:#F29802; --orange-tint:#FDF3E3; --orange-ink:#8A5A00;
  --ink:#1A2733; --muted:#5B6B78; --faint:#8A98A5;
  --bg:#EEF1F4; --card:#FFFFFF; --line:#E4E9EE; --track:#E4E9EE;
  --good:#1E8E3E; --good-tint:#E6F4EA;
  --serious:#C5221F; --serious-tint:#FCE8E6;
  --shadow:0 1px 3px rgba(13,32,52,.07);
  --radius:16px;
  --sidebar-w:236px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  font-size:14px; line-height:1.6;
  /* 🚨 260821：**ここに1回だけ書く。**箱ごとに書き足す形にすると、箱を増やすたびに漏れる
     　（記憶にある教訓「守る条件は画面名でなく振る舞いで書く」）。
     　 この画面には**外から来る自由文**が入る：他ツールの例外文（`e.message`）、社長が貼る
     　 お知らせ本文、台帳の記述、本人が書く報告。**区切り文字の無い長い英数字**が普通に来る。
     ★実測（375px・区切り無し55文字）：指定が無いと
     　 `.ht-a` `.news-item .b` `.sys-rep` `.task .meta` が **116px**、`.phase-banner` 87px、
     　 `.sys-what` 35px、`.note` 19px **はみ出していた（8個中7個）**。
     　 `=` や `-` があると折れるので、**普通のIDやURLでは気づけない**（そこで一度見落とした）。
     ★`anywhere` ではなく `break-word` にした理由：`anywhere` は最小幅の計算にも影響し、
     　 flex/grid の並びを変え得る。実測ではどちらも崩れなかったが、**弱い方で足りるなら弱い方**。 */
  overflow-wrap:break-word;
}
a{color:var(--blue); text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
[hidden]{display:none !important;}

/* ---------- デモモード帯 ---------- */
.demobar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:#FFF8E1; border-bottom:1.5px dashed #E0B400;
  padding:7px 16px; font-size:12.5px; color:#6b5900;
}
.demobar-label{font-weight:700;}
.demobar select{
  font:inherit; padding:3px 8px; border:1px solid #d8c76a; border-radius:8px; background:#fff;
}

/* ---------- 全体シェル ---------- */
.shell{display:flex; min-height:100vh;}

/* ---------- サイドバー（PC） ---------- */
.sidebar{
  width:var(--sidebar-w); flex:none;
  background:linear-gradient(175deg,var(--blue) 0%,var(--blue-deep) 100%);
  color:#fff; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.side-brand{display:flex; gap:10px; align-items:center; padding:20px 18px 16px;}
.side-logo{
  width:38px; height:38px; flex:none; border-radius:10px;
  background:#fff; color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:800;
}
.side-company{font-size:12px; font-weight:700; letter-spacing:.04em; opacity:.92;}
.side-app{font-size:15px; font-weight:800;}
.side-nav{flex:1; padding:8px 10px; overflow-y:auto;}
.side-link{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px; margin-bottom:2px;
  color:rgba(255,255,255,.86); font-size:13.5px; font-weight:600;
}
.side-link .ic{font-size:17px; width:22px; text-align:center;}
.side-link:hover{background:rgba(255,255,255,.12);}
.side-link.on{background:rgba(255,255,255,.18); color:#fff;}
.side-link .cnt{
  margin-left:auto; background:var(--orange); color:#fff;
  font-size:10.5px; font-weight:800; border-radius:999px; padding:1px 7px;
}
.side-user{
  padding:14px 18px; border-top:1px solid rgba(255,255,255,.18);
  font-size:12.5px; display:flex; align-items:center; gap:10px;
}
.side-user .avatar{
  width:32px; height:32px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
  font-weight:800;
}
.side-user .su-txt{min-width:0; flex:1;}   /* 名札が長いとき（ドローンスクール木更津…）に押し出さない */
/* ログアウト（260806）：同じ端末を別の人が使うことがあるため */
.logout-ic{
  flex:none; width:30px; height:30px; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-size:14px; line-height:1; font-family:inherit;
}
.logout-ic:hover{background:rgba(255,255,255,.28);}
.logout-row{
  display:block; width:100%; margin-top:8px; padding:12px;
  font-size:13.5px; font-weight:700; font-family:inherit; text-align:left;
  color:var(--serious); background:var(--serious-tint);
  border:none; border-radius:10px; cursor:pointer;
}
.side-user .nm{font-weight:700;}
.side-user .rl{opacity:.75; font-size:11px; line-height:1.35; overflow-wrap:anywhere;}

/* ---------- メイン ---------- */
.main-wrap{flex:1; min-width:0; display:flex; flex-direction:column;}
.main{flex:1; padding:22px 26px 40px; max-width:1120px; width:100%; margin:0 auto;}

/* モバイル用ヘッダー（PCでは非表示） */
.topbar{
  display:none; position:sticky; top:0; z-index:40;
  background:var(--blue); color:#fff;
  padding:12px 16px; align-items:center; justify-content:space-between;
}
.topbar-brand{font-size:14px; font-weight:800; letter-spacing:.04em;}

/* ---------- 共通部品 ---------- */
.rolebadge{
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); color:#fff;
}
.rolebadge.exec{background:var(--orange); border-color:var(--orange);}

.greet-block{margin-bottom:18px;}
.greet{font-size:21px; font-weight:800;}
.greet-date{font-size:12.5px; color:var(--muted); margin-top:2px;}
/* 名札＝所属事業　職能　役職（260805・社長指示）。長い事業名でも折り返して崩れないようにする */
.greet-title{
  display:inline-block; margin-top:6px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:var(--blue); background:rgba(13,32,52,.07);
  border-radius:999px; padding:3px 11px; max-width:100%;
}

.card{
  background:var(--card); border-radius:var(--radius); padding:16px 18px;
  box-shadow:var(--shadow); margin-bottom:14px;
}
.card h3{
  font-size:13px; font-weight:700; color:var(--muted);
  display:flex; align-items:center; gap:7px; margin-bottom:12px;
}
.card h3 .more{margin-left:auto; color:var(--blue); font-weight:600; font-size:12px;}

.grid{display:grid; gap:14px; grid-template-columns:1fr;}
@media(min-width:1024px){
  .grid.cols-2{grid-template-columns:1fr 1fr;}
  .grid.cols-main{grid-template-columns:1.6fr 1fr;}
  .grid .card{margin-bottom:0;}
  .grid{margin-bottom:14px;}
}

.btn{
  font-size:12.5px; font-weight:700; color:#fff; background:var(--blue);
  border:none; border-radius:999px; padding:8px 16px; white-space:nowrap;
}
.btn:hover{background:var(--blue-hover);}
.btn.ghost{background:var(--card); color:var(--blue); border:1.5px solid var(--blue);}
.btn.ghost:hover{background:var(--blue-tint);}
.btn.warn{background:var(--card); color:var(--serious); border:1.5px solid var(--serious);}
.btn.warn:hover{background:var(--serious-tint);}
.btn.sm{padding:6px 12px; font-size:11.5px;}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--orange-tint); color:var(--orange-ink); border-radius:8px;
  font-size:12px; font-weight:700; padding:6px 10px;
}
.tag{
  display:inline-block; font-size:10.5px; font-weight:700;
  border-radius:6px; padding:2px 8px; vertical-align:1px;
}
.tag.important{background:var(--orange); color:#fff;}
.tag.normal{background:var(--blue-tint); color:var(--blue);}
.tag.dept-sales{background:var(--blue-tint); color:var(--blue);}
.tag.dept-const{background:var(--orange-tint); color:var(--orange-ink);}

.empty{
  text-align:center; color:var(--faint); font-size:13px; padding:26px 0;
}

/* ---------- お知らせ ---------- */
.news-item{display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--line); align-items:flex-start;}
.news-item:first-of-type{border-top:none; padding-top:0;}
.news-item .d{flex:none; width:52px; font-size:11.5px; color:var(--faint); font-weight:600; padding-top:2px;}
.news-item .t{font-size:13.5px; font-weight:700;}
.news-item .b{font-size:12.5px; color:var(--muted); margin-top:2px; white-space:pre-wrap;}
.news-item > div:last-child{flex:1; min-width:0;}

/* お知らせの既読（260806）──「読んだ人が☑できる」＋管理職には「まだ読んでいない人」 */
.news-by{font-size:11px; color:var(--faint); font-weight:600;}
.news-act{margin-top:8px;}
/* ★高さ44px以上を確保する。職人さんは現場でスマホの手袋・濡れた指で押すので、
   小さいと押せない＝既読率が上がらない（機能があっても使われないと意味がない）。 */
.news-read{
  font-family:inherit; font-size:13px; font-weight:800; cursor:pointer;
  padding:12px 20px; min-height:44px; border-radius:999px;
  color:#fff; background:var(--blue); border:none;
}
.news-read:hover{filter:brightness(1.08);}
.news-read:disabled{background:var(--line); color:var(--muted); cursor:default;}
/* 読了は「押せないボタン」ではなく印にする（押す場所と済んだ印を見た目で分ける） */
.news-read.done{
  display:inline-block; background:var(--good-tint); color:var(--good);
  cursor:default; padding:6px 12px; min-height:0; font-size:12px;
}
.news-stat{
  margin-top:7px; font-size:11.5px; color:var(--muted);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
}
.news-stat b{color:var(--ink); font-size:12.5px;}
.news-unread{color:var(--serious); font-weight:700; overflow-wrap:anywhere;}
.news-all{color:var(--good); font-weight:700;}
/* ホームの「📢 お知らせ」見出しに出す未読件数（左サイドの .cnt と同じ見た目にそろえる） */
.card h3 .cnt{
  background:var(--orange); color:#fff;
  font-size:10.5px; font-weight:800; border-radius:999px; padding:1px 7px;
}

/* ---------- タスク ---------- */
/* 🚨 flex-wrap は必須。完了報告の入力欄（.donefm）は flex-basis:100% で
   　「自分の行に落ちる」つもりで書かれているが、**nowrap のままだと同じ行に居座り**、
   　 min-width:0 の .body が1文字幅まで潰れる（260820に社長の画面で発生）。
   　 通常の行は .body が flex-basis:0% なので、wrap を足しても折り返しは起きない。
   　 ★同じ穴は .rp-p で先に踏んで直してある（.rp-hist-wrap）。**flex に足す子は基準幅を見る。** */
.task{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line);}
.task:first-of-type{border-top:none; padding-top:2px;}
.prio{flex:none; font-size:10.5px; font-weight:700; border-radius:6px; padding:3px 8px;}
.prio.p-urgent{background:var(--serious-tint); color:var(--serious);}
.prio.p-high{background:var(--orange-tint); color:var(--orange-ink);}
.prio.p-mid{background:var(--blue-tint); color:var(--blue);}
.task .body{flex:1; min-width:0;}
.task .name{font-size:13.5px; font-weight:600;}
.task .meta{font-size:11.5px; color:var(--muted); margin-top:2px;}
.task .meta .due-today{color:var(--serious); font-weight:700;}
.task .meta .due-over{color:var(--serious); font-weight:700;}
.status-pill{
  flex:none; font-size:11px; font-weight:700; border-radius:999px; padding:4px 11px;
}
.status-pill.st-todo{background:var(--track); color:var(--muted);}
.status-pill.st-doing{background:var(--blue-tint); color:var(--blue);}
.status-pill.st-wait{background:var(--orange-tint); color:var(--orange-ink);}
.status-pill.st-done{background:var(--good-tint); color:var(--good);}
.filter-row{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.filter-btn{
  font-size:12px; font-weight:700; border-radius:999px; padding:6px 14px;
  background:var(--card); color:var(--muted); border:1.5px solid var(--line);
}
.filter-btn.on{background:var(--blue); border-color:var(--blue); color:#fff;}

/* ---------- 承認待ちアラート ---------- */
.alert{
  display:flex; align-items:center; gap:12px; background:var(--orange-tint);
  border:1px solid #F5D9A8; border-radius:14px; padding:12px 16px; margin-bottom:14px;
}
.alert .n{font-size:22px; font-weight:800; color:var(--orange-ink);}
.alert .t{font-size:13px; font-weight:700; color:var(--orange-ink);}
.alert .go{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--orange-ink); white-space:nowrap;}

/* ---------- KPI ---------- */
.kpi-num{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.kpi-num .v{font-size:30px; font-weight:800; letter-spacing:-.01em;}
.kpi-num .v .unit{font-size:15px;}
.kpi-num .u{font-size:12.5px; color:var(--muted);}
.kpi-num .pct{margin-left:auto; font-size:17px; font-weight:800; color:var(--blue);}
.meter{height:10px; background:var(--track); border-radius:999px; margin:10px 0 8px; overflow:hidden;}
.meter .fill{height:100%; background:var(--blue); border-radius:999px;}
.kpi-sub{font-size:12px; color:var(--muted); display:flex; justify-content:space-between;}

.funnel-row{display:flex; align-items:center; gap:10px; padding:7px 0;}
.funnel-row .lb{flex:none; width:86px; font-size:12px; font-weight:700;}
.funnel-row .lb small{display:block; font-weight:600; color:var(--faint); font-size:10px;}
.funnel-row .track{flex:1; height:9px; background:var(--track); border-radius:999px; overflow:hidden;}
.funnel-row .bar{height:100%; background:var(--blue); border-radius:999px;}
.funnel-row.stuck .bar{background:var(--orange);}
.funnel-row .val{flex:none; width:74px; font-size:12px; font-weight:700; text-align:right;}
.funnel-row .val small{color:var(--faint); font-weight:600;}

table.list{width:100%; border-collapse:collapse; font-size:12.5px;}
table.list th{
  text-align:left; color:var(--faint); font-size:11px; font-weight:700;
  padding:6px 8px; border-bottom:1.5px solid var(--line); white-space:nowrap;
}
table.list td{padding:9px 8px; border-bottom:1px solid var(--line); white-space:nowrap;}
table.list tr:last-child td{border-bottom:none;}
table.list .num{text-align:right; font-weight:700;}
.table-scroll{overflow-x:auto;}
/* 🚨 スマホでの最後の砦（260821）。table.list は th/td が nowrap なので、
   `.table-scroll` で包み忘れると**カードごと画面からはみ出して端が読めなくなる**
   （マイ評価「メンバーの評価」で実際に起きていた）。
   包み忘れても**表だけ横スクロール**になるようにしておく。
   ★包むのを止めてよい、という意味ではない。包むのが正で、これは保険。 */
@media (max-width:600px){
  table.list{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* ---------- HP更新状況 ---------- */
.hp-row{display:flex; align-items:center; gap:12px;}
.hp-ic{
  flex:none; width:38px; height:38px; border-radius:11px; background:var(--blue-tint);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.hp-row .t{font-size:13.5px; font-weight:700;}
.hp-row .s{font-size:12px; color:var(--muted); margin-top:1px;}
.okmark{color:var(--good); font-weight:800;}
.ngmark{color:var(--serious); font-weight:800;}

/* ---------- クイックタイル ---------- */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
@media(min-width:1024px){.tiles{grid-template-columns:repeat(8,1fr);}}
.tile{
  background:var(--card); border-radius:14px; padding:14px 6px 12px; text-align:center;
  box-shadow:var(--shadow); border:1.5px solid transparent; color:var(--ink); display:block;
}
.tile:hover{border-color:var(--blue); }
.tile .ic{font-size:22px;}
.tile .lb{font-size:11px; font-weight:600; margin-top:6px; line-height:1.35;}

/* ---------- 評価 ---------- */
.hero{display:flex; align-items:center; gap:22px;}
.hero .score{text-align:center; flex:none; min-width:110px;}
.hero .score .v{font-size:52px; font-weight:800; line-height:1; letter-spacing:-.02em;}
.hero .score .u{font-size:11.5px; color:var(--muted); margin-top:6px;}
.hero .meta{flex:1;}
.hero .meta .row{display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid var(--line);}
.hero .meta .row:last-child{border-bottom:none;}
.hero .meta .k{color:var(--muted);}
.hero .meta .v2{font-weight:700;}
.grade{
  display:inline-block; background:var(--blue-tint); color:var(--blue);
  font-weight:800; border-radius:6px; padding:1px 9px;
}
.legend{display:flex; gap:16px; font-size:12px; color:var(--muted); margin-bottom:12px;}
.legend .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px;}
.eval-item{padding:10px 0 4px; border-top:1px solid var(--line);}
.eval-item:first-of-type{border-top:none; padding-top:0;}
.eval-item .head{display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:7px;}
.eval-item .max{color:var(--faint); font-weight:600; font-size:11px;}
.barrow{display:flex; align-items:center; gap:10px; margin-bottom:5px;}
.barrow .who{flex:none; width:32px; font-size:10.5px; color:var(--muted); font-weight:600;}
.barrow .track{flex:1; height:8px; background:var(--track); border-radius:999px; overflow:hidden;}
.barrow .bar{height:100%; border-radius:999px;}
.barrow .val{flex:none; width:28px; font-size:12px; font-weight:700; text-align:right;}
.bar.self{background:var(--blue);}
.bar.boss{background:var(--orange);}
.locked{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--faint); padding:2px 0 6px;}
/* ★折返しは body に1回だけ書いた（20行目）。ここには書かない＝同じ仕事の指定を2つ持たない。 */
.note{font-size:11px; color:var(--faint); line-height:1.7; margin-top:10px;}

/* ---------- 仕組み台帳リマインド（経営ホーム） ---------- */
.sys-row{display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line);}
.sys-row:first-of-type{border-top:none; padding-top:2px;}
.sys-when{
  flex:none; min-width:64px; text-align:center; font-size:11px; font-weight:800;
  background:var(--blue-tint); color:var(--blue); border-radius:999px; padding:4px 8px;
}
.sys-row.overdue .sys-when{background:var(--serious-tint); color:var(--serious);}

/* いまの出勤状況（260804）：出勤中は緑で「いま在席」が一目で分かるようにする */
.att-chips{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 10px;}
.att-chips .chip{background:var(--line); color:var(--muted);}
.att-chips .chip.on{background:var(--good-tint); color:var(--good);}
.sys-when.on{background:var(--good-tint); color:var(--good);}
.sys-body{flex:1; min-width:0;}
.sys-name{font-size:13.5px; font-weight:700;}
.sys-what{font-size:11.5px; color:var(--muted); line-height:1.6; margin-top:2px;}
.sys-word{
  font-size:11.5px; color:var(--blue); background:var(--blue-tint); border-radius:8px;
  padding:6px 9px; margin-top:6px; cursor:pointer; line-height:1.6;
  overflow-wrap:anywhere;
}
.sys-word:hover{background:#dceafa;}
.sys-due{flex:none; font-size:11px; color:var(--faint); font-weight:600; padding-top:5px;}

/* 仕組みタブ（260805）：1行タップで手順が開く。スマホで指が届く高さを確保する */
.sys-item{border-top:1px solid var(--line); padding:2px 0;}
.sys-item:first-of-type{border-top:none;}
.sys-item > summary{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:11px 2px; cursor:pointer; list-style:none;
}
.sys-item > summary::-webkit-details-marker{display:none;}
.sys-item > summary::after{content:"＋"; margin-left:auto; color:var(--faint); font-weight:800;}
.sys-item[open] > summary::after{content:"−";}
.sys-item[open] > summary{border-bottom:1px dashed var(--line);}
.sys-item .sys-n{
  font-size:10.5px; font-weight:800; color:var(--blue);
  background:var(--blue-tint); border-radius:999px; padding:2px 7px;
}
/* 260831（v7.51）：⚠️未記録・記録が古い。青い他のバッジと**色で区別**する
   （同じ色だと「担当」「手順」と並んだときに警告だと気づけない）。 */
.sys-item .sys-n.warn{color:var(--serious); background:var(--serious-tint);}
/* 260831（v7.52）：⑧作業待ちの「期限ごとの内訳」。
   ★スマホ（375px）で2つ以上並ぶので、折り返せるようにブロックで積む
   　（1行に押し込むと、はみ出すか文字が潰れる）。 */
.wq-due{display:block; margin-top:4px; font-size:11px; color:var(--muted);}
.wq-due .tag{margin-left:6px;}
.sys-meta{font-size:11px; color:var(--faint); margin:6px 0 2px; line-height:1.7; overflow-wrap:anywhere;}
.sys-steps{margin:8px 0 4px; padding-left:22px;}
.sys-steps li{
  font-size:13px; line-height:1.75; margin-bottom:6px; color:var(--ink);
  overflow-wrap:anywhere;
}
.sys-steps li::marker{color:var(--blue); font-weight:800;}
.sys-steps a{color:var(--blue); text-decoration:underline;}
.sys-copy{
  display:block; width:100%; margin-top:8px; padding:9px;
  font-size:12px; font-weight:700; color:var(--blue);
  background:var(--blue-tint); border:none; border-radius:8px; cursor:pointer;
  font-family:inherit;
}
.sys-copy:hover{background:#dceafa;}
.sys-done{
  display:block; width:100%; margin-top:8px; margin-bottom:12px; padding:12px;
  font-size:13px; font-weight:800; color:#fff;
  background:var(--good); border:none; border-radius:8px; cursor:pointer;
  font-family:inherit;
}
.sys-done:hover{filter:brightness(.95);}
.sys-done:disabled{background:var(--line); color:var(--muted); cursor:default;}

/* 打刻ボタン（260806）：ホームのいちばん上。毎日いちばん押すものを、いちばん近くに */
.punch-btn{
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
  padding:16px 18px; border-radius:var(--radius);
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%);
  color:#fff; box-shadow:0 4px 14px rgba(13,32,52,.18);
}
.punch-btn:hover{filter:brightness(1.08);}
.punch-btn .ic{font-size:24px; line-height:1;}
.punch-btn .t{font-size:16px; font-weight:800; letter-spacing:.02em;}
.punch-btn .go{margin-left:auto; font-size:12px; font-weight:700; opacity:.85;}

/* 毎日押すもの（打刻・日報）を横並びにする（260806）。
   下部ナビは4つが上限なので、5つ目以降はここに置く＝どちらも押しやすいまま。
   スマホは1列に折り返す（横に並べると1つあたりが小さくなり押しにくい）。 */
.daily-btns{display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:16px;}
.daily-btns .punch-btn{margin-bottom:0;}
@media(min-width:700px){ .daily-btns{grid-template-columns:1fr 1fr;} }
/* 日報は打刻と色を変える（毎日2つ並ぶので、色が同じだと押し間違える） */
.punch-btn.report{background:linear-gradient(135deg,#1E8E3E 0%,#146B2D 100%);}
/* 260914（v7.55）：日報の割り当てを確かめられなかった／1つに決まらないときに、ボタンの場所へ理由を出す。
   ★ボタン（もう一度）でも枠（管理者へ）でも同じ見た目にする。緑のままだと「押せば書ける」と読まれる。 */
.punch-btn.report.warn{background:linear-gradient(135deg,#B3261E 0%,#8C1D18 100%);}
button.punch-btn{border:none; width:100%; text-align:left; font-family:inherit; cursor:pointer;}
.punch-btn.warn .t{font-size:14px;}

/* タスクの新規起票（260806） */
.newtask{
  background:var(--card); border-radius:var(--radius); margin-bottom:14px;
  box-shadow:var(--shadow, 0 1px 3px rgba(13,32,52,.08));
}
.newtask > summary{
  padding:14px 18px; cursor:pointer; list-style:none;
  font-size:14px; font-weight:800; color:var(--blue);
}
.newtask > summary::-webkit-details-marker{display:none;}
.newtask[open] > summary{border-bottom:1px solid var(--line);}
.nt-body{padding:14px 18px 16px;}
.nt-l{display:block; font-size:12px; font-weight:700; color:var(--muted); margin:10px 0 4px;}
.nt-body input[type=text], .nt-body input[type=date], .nt-body select, .nt-body textarea{
  width:100%; padding:11px 12px; font-size:16px;   /* 16px＝iOSで勝手に拡大されない */
  border:1px solid var(--line); border-radius:9px; background:#fff;
  color:var(--ink); font-family:inherit;
}
.nt-body textarea{line-height:1.7; resize:vertical; min-height:90px;}
/* 「重要」のチェック（260806・お知らせ発信）。高さを入力欄と揃えて隣に並べる */
.nw-chk{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:11px 12px; border:1px solid var(--line); border-radius:9px;
  background:#fff; font-size:13px; font-weight:700; color:var(--ink);
}
.nw-chk input{width:18px; height:18px; accent-color:var(--orange); flex:none;}
.nt-2{display:flex; gap:10px;}
.nt-2 > div{flex:1; min-width:0;}
.nt-go{
  width:100%; margin-top:14px; padding:14px;
  font-size:15px; font-weight:800; color:#fff; font-family:inherit;
  background:var(--blue); border:none; border-radius:10px; cursor:pointer;
}
.nt-go:hover{filter:brightness(1.08);}
.nt-go:disabled{background:var(--line); color:var(--muted); cursor:default;}

/* あとから届くデータの「読み込み中」表示（260806）。枠を先に出して画面の飛び跳ねを防ぐ */
.skel{display:flex; flex-direction:column; gap:8px; margin:6px 0 4px;}
.skel span{
  display:block; height:12px; border-radius:6px;
  background:linear-gradient(90deg,var(--line) 25%,rgba(0,0,0,.04) 37%,var(--line) 63%);
  background-size:400% 100%; animation:skel 1.2s ease-in-out infinite;
}
.skel span:nth-child(1){width:70%;}
.skel span:nth-child(2){width:45%;}
.skel span:nth-child(3){width:85%;}
@keyframes skel{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
@media (prefers-reduced-motion: reduce){ .skel span{animation:none;} }

/* ---------- 理念 ---------- */
.mission-block{padding:6px 0;}
.mission-block .label{font-size:11px; font-weight:800; color:var(--blue); letter-spacing:.14em;}
.mission-block .text{font-size:16px; font-weight:700; margin:4px 0 14px; line-height:1.7;}

/* 企業理念（全社共通）本文 */
.creed-p{font-size:14.5px; font-weight:600; line-height:1.95; margin:0 0 10px;}
.creed-p:last-child{margin-bottom:0;}

/* 10の大切 */
.values-grid{display:grid; grid-template-columns:1fr;}
@media(min-width:768px){.values-grid{grid-template-columns:1fr 1fr; column-gap:24px;}}
.value-row{display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line);}
.value-row:nth-child(1){border-top:none;}
@media(min-width:768px){.value-row:nth-child(2){border-top:none;}}
.value-n{
  flex:none; width:25px; height:25px; border-radius:50%; margin-top:1px;
  background:var(--blue); color:#fff; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.value-body{min-width:0;}
.value-name{font-size:14px; font-weight:800; line-height:1.5;}
.value-desc{font-size:12.5px; color:var(--muted); line-height:1.7; margin-top:1px;}

/* 事業別（ミッション・ビジョン・提供価値・行動例） */
.biz-ic{font-size:15px;}
.biz-list{margin:5px 0 14px; padding-left:1.25em; font-size:13px; line-height:1.8; color:var(--ink);}
.biz-list li{margin-bottom:5px;}
.biz-list li::marker{color:var(--blue);}
.biz-list b{font-weight:800;}
.biz-list b::after{content:"："; font-weight:600;}
.promise-p{font-size:14px; font-weight:700; line-height:1.8; margin:5px 0 14px; color:var(--orange-ink);}

.video-grid{display:grid; gap:12px; grid-template-columns:1fr;}
@media(min-width:768px){.video-grid{grid-template-columns:repeat(3,1fr);}}
.video-card{background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);}
.video-thumb{
  aspect-ratio:16/9; background:linear-gradient(150deg,var(--blue) 0%,var(--blue-deep) 100%);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:34px;
}
.video-thumb iframe{width:100%; height:100%; border:0; display:block;}
.video-card .t{font-size:12.5px; font-weight:700; padding:10px 12px 2px;}
.video-card .s{font-size:11px; color:var(--faint); padding:0 12px 12px;}

/* ---------- マニュアル・リンク集 ---------- */
.doc-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line);}
.doc-row:first-of-type{border-top:none;}
.doc-ic{flex:none; font-size:19px;}
.doc-row .t{flex:1; font-size:13px; font-weight:600; min-width:0;}
.doc-row .cat{flex:none; font-size:10.5px; color:var(--faint); font-weight:600;}
.links-grid{display:grid; gap:12px; grid-template-columns:1fr;}
@media(min-width:768px){.links-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1200px){.links-grid{grid-template-columns:1fr 1fr 1fr;}}
.link-card{
  background:var(--card); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow);
  display:flex; gap:12px; align-items:center; color:var(--ink); border:1.5px solid transparent;
}
.link-card:hover{border-color:var(--blue);}
.link-card .ic{flex:none; width:40px; height:40px; border-radius:11px; background:var(--blue-tint); display:flex; align-items:center; justify-content:center; font-size:20px;}
.link-card .t{font-size:13.5px; font-weight:700;}
.link-card .s{font-size:11.5px; color:var(--muted); margin-top:1px;}
.link-card .lock{margin-left:auto; font-size:11px; color:var(--faint); white-space:nowrap;}

/* ---------- ページ見出し ---------- */
.page-title{font-size:19px; font-weight:800; margin-bottom:4px;}
.page-sub{font-size:12.5px; color:var(--muted); margin-bottom:18px;}
.phase-banner{
  background:var(--blue-tint); color:var(--blue); border-radius:10px;
  font-size:12px; font-weight:700; padding:9px 14px; margin-bottom:14px;
}

/* ---------- 下部ナビ（モバイル） ---------- */
.bottomnav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--card); border-top:1px solid var(--line);
  padding:6px 4px calc(10px + env(safe-area-inset-bottom));
}
.bottomnav .it{
  flex:1; text-align:center; font-size:10px; font-weight:600; color:var(--faint);
  background:none; border:none; padding:2px 0;
}
.bottomnav .it{position:relative;}
.bottomnav .it .ic{font-size:20px; display:block; margin-bottom:1px; filter:grayscale(1) opacity(.55);}
.bottomnav .it.on{color:var(--blue);}
.bottomnav .it.on .ic{filter:none;}
/* 260817：下部ナビの未対応バッジ。アイコンの右上に重ねる（横に置くと文字が押されて折り返す） */
.bottomnav .it .cnt{
  position:absolute; top:-2px; left:50%; margin-left:6px;
  min-width:16px; box-sizing:border-box; text-align:center;
  background:var(--orange); color:#fff;
  font-size:10px; font-weight:800; line-height:16px; border-radius:999px; padding:0 4px;
}

/* ---------- メニューシート（モバイル） ---------- */
.sheet-backdrop{position:fixed; inset:0; background:rgba(13,32,52,.4); z-index:70;}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:71;
  background:var(--card); border-radius:20px 20px 0 0; padding:10px 18px 30px;
  box-shadow:0 -8px 30px rgba(13,32,52,.2);
}
.sheet-handle{width:44px; height:5px; border-radius:999px; background:var(--line); margin:4px auto 12px;}
.sheet-title{font-size:13px; font-weight:800; color:var(--muted); margin-bottom:6px;}
.sheet-items .side-link{color:var(--ink); font-weight:700;}
.sheet-items .side-link:hover{background:var(--blue-tint);}
.sheet-items .side-link .cnt{background:var(--orange);}

/* ============ レスポンシブ切替 ============ */
@media(max-width:1023px){
  .sidebar{display:none;}
  .topbar{display:flex;}
  .main{padding:16px 14px calc(84px + env(safe-area-inset-bottom));}
  .bottomnav{display:flex;}
  .greet{font-size:18px;}
}

/* ============================================================
   事務日報（ポータル内・260806）
   ★押す部品・入力欄は 44px 以上（現場・スマホで確実に押せる大きさ）。
   ★数字の入力は font-size:16px（iOSが勝手に画面を拡大しないため）。
   ============================================================ */
.rp-card{padding:16px 18px 18px;}
.rp-head{
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.rp-date{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700; color:var(--muted);}
.rp-date input{
  min-height:44px; padding:10px 12px; font-size:16px; font-family:inherit;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
}
.rp-state{margin-left:auto; font-size:12.5px; font-weight:800; padding-bottom:12px;}
.rp-state .ok{color:var(--good);}
.rp-state .yet{color:var(--orange-ink);}

.rp-sec{
  margin:18px 0 8px; font-size:13.5px; font-weight:800; color:var(--ink);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.rp-sec .s{font-size:11.5px; font-weight:600; color:var(--faint);}
.rp-grid{display:flex; flex-direction:column; gap:8px;}
.rp-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 12px; background:var(--bg); border-radius:10px;
}
.rp-lb{flex:1 1 150px; min-width:130px; display:flex; flex-direction:column;}
.rp-lb .n{font-size:13px; font-weight:700;}
.rp-lb .h{font-size:11px; color:var(--faint);}
.rp-f{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--muted); flex:none;}
.rp-f input{
  width:74px; min-height:44px; padding:8px 6px; font-size:16px; text-align:center;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-family:inherit;
}
.rp-card textarea{
  width:100%; padding:11px 12px; font-size:16px; line-height:1.7; resize:vertical;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-family:inherit;
}
.nt-l .req{
  margin-left:6px; padding:1px 6px; border-radius:999px;
  font-size:10.5px; font-weight:800; color:var(--serious); background:var(--serious-tint);
}
.rp-go{min-height:48px;}

/* 上長フィードバック（本人が読む側）。指導が埋もれないよう色を分ける */
.rp-fb{
  margin-top:14px; padding:12px 14px; border-radius:12px;
  background:var(--blue-tint); border-left:4px solid var(--blue);
}
.rp-fb .h{font-size:12px; font-weight:800; color:var(--blue-deep); display:flex; gap:8px; align-items:baseline;}
.rp-fb .h .at{font-size:11px; font-weight:600; color:var(--muted); margin-left:auto;}
.rp-fb .b{font-size:13px; line-height:1.75; margin-top:5px; color:var(--ink);}
.rp-fb.small{margin-top:8px; padding:9px 11px;}
.rp-fb.small .b{font-size:12.5px;}

/* これまでの日報（本人） */
.rp-hist{padding:12px 0; border-top:1px solid var(--line);}
.rp-hist:first-child{border-top:none; padding-top:0;}
.rp-hist .d{font-size:12px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:8px;}
.rp-hist .b{font-size:12.5px; color:var(--muted); line-height:1.7; margin-top:4px;}
.rp-hist .m{font-size:11px; color:var(--faint); font-weight:700; margin-top:4px;}
/* 260811：日報の履歴に「予定」を並べる（現場からの要望「翌日の行動予定を履歴で蓄積したい」）。
   📌＝その前に出した日報に書いた予定／➡️＝その日に書いた予定。
   実績（.b）と見分けがつくよう左に線を入れる。色は既存変数だけを使う（新色を増やさない）。 */
.rp-hist .plan-prev,.rp-hist .plan-next{font-size:12.5px; line-height:1.7; margin-top:6px;
  padding:6px 10px; border-left:3px solid var(--line); background:var(--bg2,transparent); border-radius:0 6px 6px 0;}
.rp-hist .plan-prev{color:var(--muted);}
.rp-hist .plan-next{color:var(--muted);}
.rp-hist .plan-prev .l,.rp-hist .plan-next .l{display:block; font-size:11px; font-weight:800; color:var(--faint); margin-bottom:2px;}
.rp-hist .muted{color:var(--faint);}
/* タスクの備考（260811）。指示の中身そのものが入っているので、期限と同じ大きさで出す */
.task .note-line{margin-top:2px;}

/* ---------- タスクの添付（260813）----------
   .task は align-items:center の横並びなので、添付は .body の中に入れて縦に積む。
   ★指で押せる大きさを確保する（現場で手袋のまま押すことがある）。 */
.att{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:5px;}
.att-n, .att-add{
  border:1.5px solid var(--line); background:var(--card); color:var(--muted);
  border-radius:8px; font-size:11.5px; font-weight:700; padding:5px 10px;
  cursor:pointer; font-family:inherit; line-height:1.2;
}
.att-n{color:var(--blue); border-color:var(--blue-tint); background:var(--blue-tint);}
.att-add{color:var(--blue); border-color:var(--blue);}
.att-add:hover, .att-n:hover{filter:brightness(.97);}
/* 🚨 ファイル名と「誰が・いつ」は**縦に積む**。タスク行はflexで、スマホでは本文の幅が
   180pxしか無い（375px端末で実測）。横並びにすると名前に42pxしか残らず、
   1件が4行に折り返して一覧が481pxの高さになる。 */
.att-list{
  flex:0 0 100%; display:flex; flex-direction:column; gap:7px;
  background:var(--track); border-radius:10px; padding:9px 11px;
}
.att-row{display:flex; flex-direction:column; gap:1px; min-width:0;}
/* 「誰が・いつ」と削除ボタンは同じ行に。削除は付けた本人にしか出ない（260814） */
.att-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
/* 現場では手袋のまま押すので、消す操作でも指で狙える高さを確保する（2回押しなので誤爆はしない） */
.att-del{
  border:none; background:transparent; color:var(--faint); font-family:inherit;
  font-size:10.5px; font-weight:700; padding:8px 10px; border-radius:6px; cursor:pointer;
  text-decoration:underline; line-height:1.2;
}
.att-del:hover{color:var(--serious); background:var(--serious-tint); text-decoration:none;}
/* 2回押しの「武装状態」。押し間違いを止めるのが目的なので、はっきり色を変える */
.att-del.armed, .btn.armed, .filter-btn.armed{
  background:var(--serious); color:#fff; text-decoration:none; border-color:var(--serious);
}
.att-f{
  font-size:12px; font-weight:700; color:var(--blue); text-decoration:none;
  overflow-wrap:anywhere; line-height:1.45;
}
.att-f:hover{text-decoration:underline;}
.att-by{font-size:10.5px; color:var(--faint); font-weight:600;}

/* 260914（v7.55）：添付をポータルの中で見る。
   ボタンだが、これまでのリンクと同じ見た目にする（押す場所が変わったと思わせない）。 */
button.att-f{background:none; border:none; padding:0; text-align:left; cursor:pointer; font-family:inherit;}
#attv{position:fixed; inset:0; z-index:90;}
.attv-bg{position:absolute; inset:0; background:rgba(13,32,52,.55);}
.attv{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(940px, calc(100vw - 24px)); max-height:calc(100vh - 24px);
  background:var(--card); border-radius:16px; box-shadow:0 12px 40px rgba(13,32,52,.35);
  display:flex; flex-direction:column; overflow:hidden;
}
.attv-h{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line);}
.attv-t{flex:1; min-width:0; font-size:13px; font-weight:800; color:var(--ink); overflow-wrap:anywhere;}
/* 手袋のまま押せる高さ（添付の削除ボタンと同じ考え方） */
.attv-x{
  flex:none; border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px;
  font-size:13px; font-weight:700; padding:10px 12px; cursor:pointer; font-family:inherit;
}
.attv-b{flex:1; min-height:0; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:10px;}
.attv-img{max-width:100%; height:auto; display:block; margin:0 auto; border-radius:8px;}
.attv-pdf{width:100%; height:min(70vh, 900px); border:1px solid var(--line); border-radius:8px; background:#fff;}
.attv-row{display:flex; gap:8px; flex-wrap:wrap;}
.attv-btn{
  display:inline-block; border:1.5px solid var(--blue); color:var(--blue); background:var(--card);
  border-radius:10px; font-size:13px; font-weight:700; padding:10px 14px; text-decoration:none;
}
.attv-msg{font-size:13.5px; color:var(--ink); line-height:1.7; padding:18px 6px; text-align:center;}
.attv-msg.bad{color:var(--serious);}
.attv-note{font-size:11.5px; color:var(--muted); line-height:1.6;}
.attv-f{padding:8px 12px 12px; border-top:1px solid var(--line);}
.attv-drive{font-size:11px; color:var(--faint); text-decoration:underline;}
/* スマホは下から出す（片手で「閉じる」に指が届く位置） */
@media (max-width:640px){
  .attv{left:0; right:0; top:auto; bottom:0; transform:none; width:100%; max-height:92vh; border-radius:16px 16px 0 0;}
}

/* 新規起票フォームの添付（260813夜）。ここは「選んで持っているだけ」の状態を出す。
   ★送ったあとの一覧（.att-list）とは見た目を変える＝まだ送っていないことが分かるように。 */
.nt-att{margin-top:4px;}
.nt-att-add{
  display:inline-block; border:1.5px solid var(--blue); background:var(--card); color:var(--blue);
  border-radius:10px; font-size:12.5px; font-weight:700; padding:9px 14px;
  cursor:pointer; font-family:inherit;
}
.nt-att-add:hover{background:var(--blue-tint);}
.nt-att-list:not(:empty){
  margin-top:8px; display:flex; flex-direction:column; gap:6px;
  background:var(--orange-tint); border-radius:10px; padding:9px 11px;
}
.nt-att-row{display:flex; align-items:center; gap:8px; min-width:0;}
.nt-att-f{flex:1; min-width:0; font-size:12px; font-weight:700; color:var(--ink); overflow-wrap:anywhere;}
.nt-att-s{flex:none; font-size:10.5px; font-weight:700; color:var(--orange-ink);}
/* 取り消しの✕。現場では手袋のまま押すことがあるので指で押せる大きさにする */
.nt-att-x{
  flex:none; width:32px; height:32px; border:none; background:var(--card); color:var(--muted);
  border-radius:8px; font-size:14px; font-weight:800; cursor:pointer; font-family:inherit;
}
.nt-att-x:hover{background:var(--serious-tint); color:var(--serious);}
.nt-att-h{font-size:11px; color:var(--faint); font-weight:600; margin-top:6px; line-height:1.6;}

/* ---------- 並べ替え・タスクの中止（260814・従業員のご要望）---------- */
.sort-row{align-items:center; margin-top:-2px;}
.sort-l{font-size:11.5px; font-weight:700; color:var(--faint); margin-right:2px;}
/* 「人ごと」のときに挟む見出し。どこで人が切り替わったかを目で追えるように */
.task-group{
  font-size:11.5px; font-weight:800; color:var(--blue);
  background:var(--blue-tint); border-radius:8px;
  padding:5px 10px; margin:10px 0 2px;
}
.task-group:first-child{margin-top:2px;}
/* 中止は「変更」フォームのいちばん下。誤爆しないよう区切り線を引いて離す */
.te-cancel{margin-top:14px; padding-top:12px; border-top:1px solid var(--line);}
.te-cancel .note{margin-top:6px;}
.tag.fbdone{background:var(--good-tint); color:var(--good);}
.tag.fbyet{background:var(--orange-tint); color:var(--orange-ink);}

/* 日報の確認（経営・部門長） */
.rp-missing{
  font-size:12.5px; font-weight:700; color:var(--orange-ink);
  background:var(--orange-tint); border-radius:10px; padding:10px 12px; margin-bottom:10px;
}
.rp-missing b{color:var(--serious); overflow-wrap:anywhere;}
.rp-allin{
  font-size:12.5px; font-weight:700; color:var(--good);
  background:var(--good-tint); border-radius:10px; padding:10px 12px; margin-bottom:10px;
}
.rp-people{display:flex; flex-direction:column; gap:8px;}
.rp-p{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; border-radius:10px; background:var(--bg); border-left:4px solid var(--track);
}
.rp-p.ok{border-left-color:var(--good);}
.rp-p.yet{border-left-color:var(--orange);}
/* 今日は出勤していない人（260812）。**オレンジにしない**＝催促の対象ではない。
   色を分けないと、休んだ人が並んで**本当に出していない人が埋もれる**。 */
.rp-p.rest{border-left-color:var(--track);}
.rp-p.rest .st{color:var(--faint);}
.rp-p .nm{font-size:13px; font-weight:700; display:flex; align-items:baseline; gap:6px;}
.rp-p .nm .id{font-size:10.5px; font-weight:600; color:var(--faint);}
.rp-p .st{font-size:12px; font-weight:800;}
.rp-p.ok .st{color:var(--good);}
.rp-p.yet .st{color:var(--orange-ink);}
.rp-p .mo{margin-left:auto; font-size:11.5px; font-weight:700; color:var(--muted);}

/* フィードバック待ちの1件 */
.rp-pend{border-top:1px solid var(--line);}
.rp-pend:first-of-type{border-top:none;}
.rp-pend > summary{
  padding:12px 0; cursor:pointer; list-style:none;
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; min-height:44px;
}
.rp-pend > summary::-webkit-details-marker{display:none;}
.rp-pend > summary .d{flex:none; font-size:11.5px; font-weight:800; color:var(--faint);}
.rp-pend > summary .n{flex:none; font-size:13px; font-weight:700;}
.rp-pend > summary .t{flex:1; min-width:0; font-size:12px; color:var(--muted); overflow-wrap:anywhere;}
.rp-pb{padding:2px 0 16px;}
.rp-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.rp-chip{
  font-size:11.5px; font-weight:700; color:var(--blue);
  background:var(--blue-tint); border-radius:999px; padding:4px 10px;
}
.rp-chip b{font-size:13px;}
.rp-dt{font-size:12.5px; line-height:1.75; color:var(--ink); margin-bottom:8px;}
.rp-dt .l{
  display:block; font-size:11px; font-weight:800; color:var(--faint); margin-bottom:1px;
}
.rp-pb textarea{
  width:100%; padding:11px 12px; font-size:16px; line-height:1.7; resize:vertical;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-family:inherit;
}

/* 事務日報：スマホでは「分類名」を1行目、「件数・時間」を2行目に揃える。
   横並びのまま折り返させると片方だけ下に落ちて、行ごとに位置がずれる（実機で確認・260806）。 */
@media(max-width:520px){
  .rp-row{gap:6px 10px;}
  .rp-lb{flex:1 1 100%;}
  .rp-f{flex:1 1 0; min-width:0;}
  .rp-f input{width:100%;}
  .rp-head{gap:8px;}
  .rp-date{flex:1 1 100%;}
  .rp-state{margin-left:0; padding-bottom:0;}
}

/* 提出率（分母＝勤怠の出勤日数・260806）。100%かどうかが一目で分かる色にする */
.rp-p .rate{margin-left:auto; text-align:right; font-size:11.5px; font-weight:700; color:var(--muted);}
.rp-p .rate b{font-size:15px;}
.rp-p .rate.full b{color:var(--good);}
.rp-p .rate.short b{color:var(--serious);}
.rp-p .rate.none{color:var(--faint);}
.rp-p .rate .w{display:block; font-size:10.5px; font-weight:600; color:var(--faint);}
@media(max-width:520px){ .rp-p .rate{margin-left:0; text-align:left; flex:1 1 100%;} }

/* 当月の既読率（260806）。★これが評価に載る数字なので、他のカードより目立たせる */
.nm-card h3 .more{color:var(--orange-ink); background:var(--orange-tint); padding:2px 8px; border-radius:999px; font-size:10.5px;}
.nm-head{font-size:12.5px; color:var(--muted); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:10px; border-bottom:1px solid var(--line);}
.nm-head b{color:var(--ink); font-size:14px;}
.nm-head .left{margin-left:auto; font-weight:800; color:var(--orange-ink); background:var(--orange-tint); padding:2px 10px; border-radius:999px;}
.nm-people{display:flex; flex-direction:column; gap:6px; margin-top:10px;}
.nm-p{display:flex; align-items:baseline; gap:10px; padding:7px 12px; border-radius:9px; background:var(--bg); border-left:4px solid var(--track);}
.nm-p.full{border-left-color:var(--good);}
.nm-p.short{border-left-color:var(--serious);}
.nm-p .nm{font-size:13px; font-weight:700; flex:1; min-width:0; overflow-wrap:anywhere;}
.nm-p .v{font-size:15px; font-weight:800;}
.nm-p.full .v{color:var(--good);}
.nm-p.short .v{color:var(--serious);}
.nm-p .w{font-size:11px; font-weight:600; color:var(--faint); width:62px; text-align:right;}
.nm-zero{margin-top:10px; padding:10px 12px; border-radius:9px; background:var(--good-tint); color:var(--good); font-size:12.5px; font-weight:700;}
.nm-warn{margin-top:8px; font-size:11.5px; font-weight:700; color:var(--orange-ink);}

/* ============================================================
   評価の月次サイクル（機能A・260806）
   ★期限超過を一目で分かるように。6〜8月に96項目が未入力だったのは
   　「見に行かないと分からない」状態だったから。目に入る色にする。
   ============================================================ */
.ec-card{padding:14px 16px 16px;}
.ec-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:4px;}
.ec-mon{font-size:14px; font-weight:800;}
.ec-mon .l{display:block; font-size:10.5px; font-weight:700; color:var(--faint);}
.ec-cnt{margin-left:auto; font-size:12.5px; font-weight:800; color:var(--muted); background:var(--bg); padding:5px 12px; border-radius:999px;}
.ec-cnt.bad{color:var(--serious); background:var(--serious-tint);}
.ec-item{padding:12px 0; border-top:1px solid var(--line);}
.ec-item:first-of-type{border-top:none;}
.ec-item.over{background:linear-gradient(90deg,var(--serious-tint),transparent 60%); border-radius:10px; padding-left:10px; margin-left:-10px;}
.ec-item.done{opacity:.62;}
.ec-item.off{opacity:.5;}
.ec-h{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;}
.ec-h .id{font-size:11px; font-weight:800; color:#fff; background:var(--blue); padding:2px 8px; border-radius:6px; flex:none;}
.ec-h .nm{font-size:14px; font-weight:700; flex:1; min-width:120px;}
.tag.ovd{background:var(--serious-tint); color:var(--serious);}
.tag.todo{background:var(--blue-tint); color:var(--blue);}
.tag.off{background:var(--track); color:var(--muted);}
.ec-m{font-size:11.5px; color:var(--muted); margin-top:4px;}
.ec-a{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px;}
.ec-guide{font-size:12.5px; font-weight:700; color:var(--blue); background:var(--blue-tint);
  padding:10px 14px; border-radius:9px; min-height:44px; display:inline-flex; align-items:center;}
.ec-go{
  min-height:44px; padding:10px 20px; font-size:13.5px; font-weight:800; font-family:inherit;
  color:#fff; background:var(--good); border:none; border-radius:9px; cursor:pointer;
}
.ec-go:hover{filter:brightness(1.08);}
.ec-go:disabled{background:var(--line); color:var(--muted); cursor:default;}
.ec-lock{font-size:11.5px; font-weight:700; color:var(--orange-ink); background:var(--orange-tint);
  padding:9px 12px; border-radius:9px; flex:1; min-width:200px;}
.ec-at{font-size:11.5px; font-weight:700; color:var(--good);}
@media(max-width:520px){ .ec-cnt{margin-left:0;} .ec-guide,.ec-go{flex:1; justify-content:center; text-align:center;} }

/* ===== 名簿（3つの名簿を1画面に）260807・経営のみ ===== */
/* 🚨 押す部品は44px以上（現場で手袋・濡れた指で押すため。引き継ぎ書§4-14） */
.rs-howto{background:var(--blue-tint); border:1px solid #cfe3f4;}
.rs-howto ul{margin:6px 0 0; padding-left:18px;}
.rs-howto li{font-size:12.5px; line-height:1.75; color:var(--ink); margin-top:4px;}

.rs-sum .rs-nums{display:flex; flex-wrap:wrap; gap:10px;}
.rs-n{flex:1 1 88px; text-align:center; background:var(--bg); border-radius:12px; padding:10px 6px;}
.rs-n .v{display:block; font-size:22px; font-weight:800; color:var(--ink); line-height:1.2;}
.rs-n .l{display:block; font-size:11px; color:var(--muted); margin-top:2px;}
.rs-n.ok .v{color:var(--good);}
.rs-n.bad{background:var(--serious-tint);} .rs-n.bad .v{color:var(--serious);}
.rs-src{margin-top:10px; font-size:11.5px; color:var(--muted); line-height:1.7;}

.rs-issue{border-top:1px solid var(--line); padding:13px 0 15px;}
.rs-issue:first-of-type{border-top:none;}
.rs-issue.error{background:linear-gradient(90deg,var(--serious-tint),transparent 65%); border-radius:10px; padding-left:10px; margin-left:-10px;}
.rs-issue.warn{background:linear-gradient(90deg,var(--orange-tint),transparent 65%); border-radius:10px; padding-left:10px; margin-left:-10px;}
.rs-ih{font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.rs-where{font-size:11.5px; color:var(--muted); background:var(--bg); border-radius:8px; padding:2px 8px;}
.rs-iw{font-size:13px; color:var(--ink); margin-top:5px; line-height:1.65;}
.rs-steps-t{font-size:11.5px; font-weight:700; color:var(--muted); margin-top:9px;}
.rs-steps{list-style:none; margin:5px 0 0; padding:0;}
.rs-steps li{position:relative; padding-left:26px; font-size:12.5px; line-height:1.7; color:var(--ink); margin-top:4px;}
.rs-steps li .n{
  position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--blue); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.rs-fix{display:flex; align-items:center; gap:8px; margin-top:9px; flex-wrap:wrap;}
.rs-fix label{font-size:11.5px; color:var(--muted); min-width:52px;}
.rs-sel,.rs-inp{
  min-height:44px; padding:0 11px; font-size:14px; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line); border-radius:10px; font-family:inherit;
}
.rs-sel{min-width:120px;} .rs-inp{flex:1 1 200px; min-width:0;}
.rs-sel:focus,.rs-inp:focus{outline:none; border-color:var(--blue);}
.rs-btn{
  min-height:44px; padding:0 16px; font-size:13.5px; font-weight:700; font-family:inherit;
  background:var(--blue); color:#fff; border:none; border-radius:10px; cursor:pointer;
}
.rs-btn:disabled{background:var(--line); color:var(--muted); cursor:default;}

.rs-grp{margin-top:14px;}
.rs-grp:first-of-type{margin-top:4px;}
.rs-gh{
  font-size:12px; font-weight:700; color:var(--muted); padding-bottom:5px;
  border-bottom:1.5px solid var(--line); display:flex; justify-content:space-between;
}
.rs-row{padding:11px 0; border-bottom:1px solid var(--line);}
.rs-row.ng{background:linear-gradient(90deg,var(--serious-tint),transparent 55%);}
.rs-row.left{opacity:.55;}
.rs-rh{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.rs-rh .id{font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums;}
.rs-rh .nm{font-size:14.5px; font-weight:700; color:var(--ink);}
.rs-rh .rk{font-size:11.5px; color:var(--muted);}
.rs-rm{display:flex; gap:5px; margin-top:5px; flex-wrap:wrap;}
.rs-m,.rs-li{
  font-size:10.5px; padding:2px 7px; border-radius:7px;
  background:var(--bg); color:var(--faint); border:1px solid var(--line);
}
.rs-m.on,.rs-li.on{background:var(--good-tint); color:var(--good); border-color:#bfe3ca;}
.rs-edit{display:flex; gap:8px; margin-top:7px; flex-wrap:wrap;}
.rs-edit .rs-fix{margin-top:0; flex:1 1 168px;}

/* ===== 担当マップ（誰が誰を見るか）260808 ===== */
.rs-duty{padding:11px 0; border-top:1px solid var(--line);}
.rs-duty:first-of-type{border-top:none;}
.rs-dh{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:14.5px; color:var(--ink);}
.rs-chip{font-size:10.5px; padding:2px 8px; border-radius:999px; white-space:nowrap;}
.rs-chip.sub{background:var(--blue-tint); color:var(--blue);}
.rs-chip.ev{background:var(--orange-tint); color:var(--orange-ink);}
.rs-chip.sy{background:var(--good-tint); color:var(--good);}
.rs-chip.non{background:var(--bg); color:var(--faint);}
.rs-dl{font-size:12.5px; color:var(--ink); line-height:1.75; margin-top:3px;
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;}
.rs-dl .k{font-size:11px; color:var(--muted); min-width:150px; flex:0 0 auto;}
.rs-dl .dim{color:var(--faint);}
@media (max-width:600px){ .rs-dl .k{min-width:0; flex-basis:100%;} }

/* ===== 日報の出し忘れ警告（ホーム最上部）260808 ===== */
/* 🚨 出していない人にだけ出る。出している人には何も出ない（叱らない） */
.alert.rp-todo{display:block; background:var(--orange-tint); border:1.5px solid #f0d3a0; color:var(--ink);}
.rp-th{display:flex; align-items:center; gap:9px;}
.rp-th .ic{font-size:20px;}
.rp-th .t{font-size:15px; font-weight:700; flex:1;}
.rp-th .n{font-size:12px; font-weight:700; color:#fff; background:var(--orange);
  border-radius:999px; padding:3px 11px; white-space:nowrap;}
.rp-tb{font-size:12.5px; color:var(--ink); line-height:1.7; margin-top:6px;}
.rp-days{display:flex; flex-wrap:wrap; gap:8px; margin-top:9px;}
.rp-day{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  background:var(--card); border:1.5px solid var(--orange); border-radius:10px;
  font-size:13.5px; font-weight:700; color:var(--orange-ink); text-decoration:none;
}
.rp-day:active{background:var(--orange-tint);}
.rp-more{display:inline-flex; align-items:center; min-height:44px; font-size:12.5px; color:var(--muted);}
.rp-tf{font-size:11.5px; color:var(--muted); margin-top:8px;}


/* ===== 役職日報（260809）＝数値の報告義務つき ===== */
.rr-kpi{margin-left:8px; font-size:12.5px; font-weight:700; white-space:nowrap;}
.rr-lockrow{align-items:center;}
.rr-lockrow .rr-in{flex:1; min-width:150px;}
.rr-lockrow .rr-in input, .rr-lockrow .rr-in select{width:100%;}
.rr-verify{margin:10px 0 4px; padding:10px 12px; border-radius:10px; background:var(--bg);
  border:1px solid var(--line); font-size:12.5px; line-height:1.8;}
.rr-verify .okl{color:#1B7F4B;}
.rr-verify .ngl{color:#B45309; font-weight:700;}
.rr-verify .nal{color:var(--muted); font-weight:700;}
.rr-detail{margin:2px 0 10px;}
.rr-dr{display:flex; gap:10px; padding:4px 0; font-size:13px; border-bottom:1px dashed var(--line);}
.rr-dr .k{min-width:11em; color:var(--muted); flex:none;}
.rr-dr .v{flex:1; font-weight:600; overflow-wrap:anywhere;}

/* ===== 上長の定性判定（○△×）（260812）=====
   🚨 選んだ記号がひと目で分かること。ここが曖昧だと「入れたつもりで入っていない」が起きる。 */
.bars-p{border-top:1px solid var(--line); padding:10px 0; min-width:0;}
.bars-p:first-of-type{border-top:none;}
.bars-h{display:flex; gap:8px; align-items:center; flex-wrap:wrap; cursor:pointer;
  list-style:none; padding:6px 0; min-height:44px;}
.bars-h::-webkit-details-marker{display:none;}
.bars-h .nm{font-size:14px; font-weight:800;}
.bars-h .rl{font-size:11.5px; color:var(--muted);}
.bars-list{display:flex; flex-direction:column; gap:10px; margin-top:4px;}
.bars-i{padding:11px 12px; border-radius:10px; background:var(--bg);
  border-left:4px solid var(--orange); min-width:0;}
.bars-i.done{border-left-color:var(--good);}
.bars-i .bars-t{font-size:13.5px; font-weight:800; overflow-wrap:anywhere;}
.bars-i .bars-g{font-size:12px; margin-top:5px; line-height:1.6; color:#1B7F4B; overflow-wrap:anywhere;}
.bars-i .bars-b{font-size:12px; margin-top:2px; line-height:1.6; color:var(--muted); overflow-wrap:anywhere;}
.bars-mm{display:flex; gap:8px; margin-top:9px;}
.bars-m{flex:1; min-height:46px; font-size:20px; font-weight:800; cursor:pointer;
  border:1.5px solid var(--line); border-radius:10px; background:var(--card); color:var(--muted);}
.bars-m.on{background:var(--blue); border-color:var(--blue); color:#fff;}
.bars-memo{width:100%; margin-top:8px; padding:9px 11px; font-size:16px; line-height:1.6;
  resize:vertical; border:1px solid var(--line); border-radius:9px;
  background:#fff; color:var(--ink); font-family:inherit;}
.bars-go{margin-top:8px; min-height:40px;}

/* ===== 職人日報：1日に何件でも（260812）=====
   本人の画面（足した工事の一覧）と、上長の画面（その日の工事）で同じ見た目を使う。
   🚨 いま直している行は色を変える（何を直しているのか分からないまま送らせない）。 */
.sk-list{display:flex; flex-direction:column; gap:8px; margin-bottom:4px;}
.sk-r{padding:10px 12px; border-radius:10px; background:var(--bg);
  border-left:4px solid var(--track); min-width:0;}
.sk-r.on{border-left-color:var(--blue); background:var(--blue-tint);}
.sk-r .sk-w{font-size:13.5px; font-weight:800; overflow-wrap:anywhere;}
.sk-r .sk-m{font-size:11.5px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere;}
.sk-r .sk-d{font-size:12.5px; margin-top:4px; line-height:1.6; overflow-wrap:anywhere;}
.sk-r .sk-n{font-size:12px; margin-top:5px; line-height:1.6; color:var(--blue-deep);
  background:var(--card); border-radius:8px; padding:6px 8px; overflow-wrap:anywhere;}
.sk-r .sk-b{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;}
.sk-hol{margin-left:6px; font-size:10.5px; font-weight:800; padding:1px 6px; border-radius:999px;
  background:var(--orange-tint); color:var(--orange-ink);}
.sk-sum{font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:6px;}
/* 「新しく足すのに切り替える」＝見出しの右に置く文字ボタン（枠を作らない） */
.rr-kpi.as-link{background:none; border:0; font:inherit; cursor:pointer; padding:0;
  color:var(--blue); font-weight:700;}

/* ===== 上長が読む「過去の日報」（260809） =====
   🚨 260812（社長のご指摘「スマホで過去の日報を見ていると文字がはみ出る」）：
   　 親の .rp-p は **flex** なので `grid-column:1/-1` は**1文字も効いていなかった**。
   　 効かないまま flex:0 1 auto／min-width:auto だと、中の `.t`（white-space:nowrap の
   　 1行要約）の長さがそのまま最小幅になり、**カードが画面より広くなる**。
   　 実測：iPhone幅375pxに対して 456px ＝ 81px はみ出していた。
   　 行いっぱいに広げ（flex:1 1 100%）、縮められるようにする（min-width:0）。 */
.rp-hist-wrap{flex:1 1 100%; width:100%; min-width:0; margin-top:8px;}
.rp-hist-wrap>summary{cursor:pointer; font-size:12.5px; font-weight:700; color:var(--accent);
  list-style:none; padding:6px 0;}
.rp-hist-wrap>summary::-webkit-details-marker{display:none;}
.rp-hist-in{border-top:1px solid var(--line); margin-top:4px;}
.rp-h1{border-bottom:1px solid var(--line);}
.rp-h1>summary{cursor:pointer; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:8px 0; font-size:12.5px; list-style:none;}
.rp-h1>summary::-webkit-details-marker{display:none;}
.rp-h1>summary .d{font-weight:700; flex:none;}
.rp-h1>summary .t{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;}
.rp-hb{padding:2px 0 12px;}
/* 🚨 スマホでは1行要約が読めない（260821に実測で判明）。
   　 `.d`(日付) と FB済/FB待ちの札で幅を取られ、`.t` に残るのは **146px＝日本語10文字ほど**。
   　 nowrap＋…で切られるので「崩れている」ように見える（社長のご指摘の1つがこれ）。
   　 → 狭い画面では **要約を自分の行に落として2行まで**出す。
   　 　 summary は既に flex-wrap:wrap なので flex-basis:100% で自分の行に落ちる。 */
@media (max-width:600px){
  .rp-h1>summary .t{
    flex:1 1 100%; white-space:normal; text-overflow:clip; line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
}

/* ===== 最新に更新（260809）===== */
.refresh-ic{margin-left:auto; background:none; border:0; font-size:19px; line-height:1;
  padding:6px 8px; cursor:pointer; border-radius:8px; color:inherit;}
.refresh-ic:active{background:rgba(0,0,0,.06);}
.spin{animation:sp .9s linear infinite; display:inline-block;}
@keyframes sp{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.spin{animation:none; opacity:.5;}}

/* ===== ドローン「今週の必達」（260809・読むだけ）===== */
.pace-card{background:linear-gradient(180deg,var(--accent-soft,#eaf2f8),transparent);}
.pc-h{font-size:13px; font-weight:800; margin-bottom:10px;}
.pc-g{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.pc-i{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 8px; text-align:center;}
.pc-i .k{font-size:11.5px; color:var(--muted);}
.pc-i .v{font-size:16px; font-weight:800; margin-top:2px;}
.pc-i .s{font-size:11px; color:var(--faint); margin-top:1px;}
.pc-i.done .v{color:#1B7F4B;}
.pc-b{margin-top:9px; font-size:12.5px;}

/* ===== 営業部長 v2：集計カード（260810・表示だけ／入力欄ではない）===== */
.sum-card{background:linear-gradient(180deg,var(--accent-soft,#eaf2f8),transparent);}
.sm-h{font-size:13px; font-weight:800; margin-bottom:10px; display:flex; gap:8px; align-items:baseline;}
.sm-h .src{margin-left:auto; font-size:11px; font-weight:600; color:var(--muted);}
.sm-g{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
@media (max-width:520px){.sm-g{grid-template-columns:1fr;}}
.sm-i{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 11px;}
.sm-i .k{font-size:11.5px; color:var(--muted);}
.sm-i .v{font-size:19px; font-weight:800; margin-top:2px; overflow-wrap:anywhere;}
.sm-i .s{font-size:11.5px; color:var(--faint); margin-top:2px; overflow-wrap:anywhere;}
.sm-b{margin-top:9px; font-size:12.5px; line-height:1.7;}
/* 📊自動記録（人が入れた値と区別する。同じ見た目にすると「誰が書いたのか」が消える） */
.rr-snaphead{margin-top:9px; padding-top:7px; border-top:1px solid var(--line);
  font-size:11.5px; font-weight:800; color:var(--muted);}
.rr-dr.snap .v{font-weight:700; color:var(--blue-deep);}

/* ===== LINEのリンクから来たが開けなかったときの説明（260810夕）===== */
.dl-note{border-left:4px solid var(--blue,#0068B5);}
.dl-note .h{font-size:13px; font-weight:800; color:var(--blue-deep); margin-bottom:5px;}
.dl-note .b{font-size:12.5px; line-height:1.75;}

/* ===== FBを返せない相手（260810・二重FBの動機を消す）===== */
.rp-fbno{margin-top:10px; padding:10px 12px; border-radius:10px;
  background:var(--track); font-size:12.5px; line-height:1.75; color:var(--ink);}
.rp-otherpend{margin-top:10px; padding:9px 12px; border-radius:10px;
  background:var(--bg); font-size:12.5px; font-weight:700;}
.rp-otherpend .s{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-top:2px;}

/* ---------- タスクの完了報告（260817・社長のご要望「報告までがセット」） ---------- */
.donefm{
  flex-basis:100%; margin-top:8px; padding:10px 12px;
  background:var(--blue-tint); border-radius:10px;
}
.donefm textarea{
  width:100%; box-sizing:border-box; margin-top:2px; padding:8px 10px;
  border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px;
  line-height:1.5; resize:vertical; background:var(--card); color:var(--ink);
}
.donefm-btns{display:flex; gap:8px; justify-content:flex-end; margin-top:8px;}
.donefm .note{margin-top:6px;}
.btn.ghost{background:none; color:var(--muted); border:1px solid var(--line);}
/* 検収カードの報告行（備考より目立たせる＝検収の判断に使うのはこちら） */
.report-line{color:var(--ink) !important;}
.report-line b{color:var(--blue);}

/* ---------- 今月の追客（260817・評価制度側 依頼(5-1)） ---------- */
.follow-big{font-size:34px; font-weight:800; color:var(--blue); line-height:1.1; margin:2px 0 8px;}
.follow-big small{font-size:15px; font-weight:700; color:var(--muted);}
.follow-sub{margin-top:8px; font-size:13px; color:var(--ink);}
.card h3 small{margin-left:8px; font-size:11.5px; font-weight:700; color:var(--muted);}

/* ---------- 過去の出退勤（260818・役職者のみ） ---------- */
.atthist{margin-top:10px; border-top:1px solid var(--line); padding-top:8px;}
.atthist>summary{cursor:pointer; font-size:13px; font-weight:700; color:var(--blue); list-style:none;}
.atthist>summary::-webkit-details-marker{display:none;}
.atthist-body{margin-top:8px;}
.atthist-body input[type=date]{
  padding:7px 10px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:13px; background:var(--card); color:var(--ink); margin-right:8px;
}

/* ============================================================
   👀 みんなのタスク（260819・従業員 佐藤さんのご要望）
   ------------------------------------------------------------
   ★既存の .task / .filter-btn / .status-pill / .prio をそのまま使う。
   　 新しいのは「公開の帯」と「起票フォームの2択」だけ＝覚えることを増やさない。
   ★スマホ375pxで、1件が3行を超えないことを実測してから決めた値
   　（添付で1件が4行に折り返して一覧が481pxになった失敗を繰り返さない）。
   ============================================================ */
.bd-row .name{overflow-wrap:anywhere;}
/* 自分が関係しているタスクは、一覧の中で見つけられるように左に印を付ける */
.bd-mine{position:relative;}
.bd-mine::before{
  content:""; position:absolute; left:-8px; top:10px; bottom:10px;
  width:3px; border-radius:2px; background:var(--blue);
}
/* 終わったものは薄く（「いま動いているもの」を目立たせる） */
.bd-done{opacity:.62;}

/* ---------- タスクカードの「公開」帯 ---------- */
.bd-ctl{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:5px;}
.bd-badge{
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  background:var(--blue-tint); color:var(--blue);
}
.bd-btn{
  font:inherit; font-size:11.5px; font-weight:700; line-height:1;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--blue); background:#fff; color:var(--blue);
}
.bd-btn.off{border-color:var(--line); color:var(--muted);}
/* 2回押しの1回目（＝「全員に見せる（もう一度押す）」）。押し間違いで全員に出るのを止める。
   ★武装中の見た目は既存の .armed（添付の削除・タスクの中止と同じ）に合わせる */
.bd-btn.armed{border-color:var(--serious); background:var(--serious-tint); color:var(--serious);}
.bd-btn:hover{filter:brightness(.97);}
.bd-btn:disabled{opacity:.6;}

/* ---------- 起票フォームの「みんなに公開する／公開しない」 ---------- */
.nt-open{display:flex; flex-wrap:wrap; gap:8px;}
/* 🚨 375px端末で**1行に収まる**寸法にしてある（実測：文字12px・左右余白9px・すき間5px
   　 → 1枚152px×2＝312px、フォームの内幅311pxにちょうど収まる）。
   　 収まらないと1枚61pxの2行になり、いちばん大事な2択が一番読みにくくなる。 */
.nt-op{
  display:flex; align-items:center; gap:5px;
  padding:10px 9px; border:1.5px solid var(--line); border-radius:12px;
  background:#fff; font-size:12px; font-weight:700; color:var(--muted);
  cursor:pointer; flex:1 1 46%; min-width:140px; white-space:nowrap;
}
.nt-op span{overflow:hidden; text-overflow:ellipsis;}
/* 🚨 指で押す前提。ラジオそのものを小さくしない（現場は手袋のことがある） */
.nt-op input{width:18px; height:18px; flex:none; accent-color:var(--blue);}
.nt-op:has(input:checked){border-color:var(--blue); background:var(--blue-tint); color:var(--blue);}
/* :has() が効かない古い端末でも、選ばれている側が分かるようにする保険 */
.nt-op input:checked + span{color:var(--blue);}
/* 🚨 公開を選んでいる間だけ出す赤字。**選び忘れを無くす唯一の方法は、結果をその場に見せること** */
.nt-open-h{
  margin-top:8px; padding:8px 10px; border-radius:10px;
  background:var(--serious-tint); color:var(--serious);
  font-size:11.5px; font-weight:700; line-height:1.6;
}

/* お知らせの宛先（TO）── 260818夜・従業員のご要望「TOを追加してほしい」
   ★3パターンとも必ず出す（全体宛も出す）。札が無いと「指定し忘れ」と区別が付かないため。
   ★全体宛は控えめな灰色、事業宛は青。**色で「絞ってあるか」が1目で分かる**ようにする。 */
.tag.news-to{background:var(--blue-tint); color:var(--blue); font-weight:700;}
.tag.news-to.all{background:var(--line); color:var(--muted);}

/* ---------- 評価サイクル：3つに分ける／判定の入力状況（260821） ---------- */
.ec-grp{border-top:1px solid var(--line); margin-top:10px;}
.ec-grp:first-of-type{border-top:none; margin-top:4px;}
.ec-grp>summary{cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:8px; padding:10px 0 6px; font-size:13px; font-weight:800; color:var(--ink);}
.ec-grp>summary::-webkit-details-marker{display:none;}
.ec-grp>summary .n{font-size:11.5px; font-weight:800; color:var(--blue);
  background:var(--blue-tint); border-radius:999px; padding:2px 9px;}
.ec-grp>summary .s{font-size:11.5px; font-weight:600; color:var(--muted); flex:1 1 100%;}
.ec-go.nudge{background:var(--orange-ink); border-color:var(--orange-ink);}
.ec-go.ghost{background:none; color:var(--muted); border:1px solid var(--line);}
.ec-prog{margin:10px 0 4px; padding:12px 14px; border-radius:11px;
  background:var(--orange-tint); border-left:4px solid var(--orange-ink);}
.ec-prog.ok{background:var(--good-tint, #E6F4EA); border-left-color:var(--good);}
.ec-prog .h{font-size:13px; font-weight:800; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;}
.ec-prog .h .big{margin-left:auto; font-size:19px; font-weight:800;}
.ec-prog .s{font-size:12.5px; color:var(--ink); margin-top:5px; line-height:1.7;}
.ec-prog .s.warn{color:var(--serious); font-weight:700;}
.ec-prog .p{font-size:12.5px; margin-top:3px; overflow-wrap:anywhere;}
.ec-prog .a{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:9px;}
.ec-prog .a .at{font-size:11px; color:var(--muted); font-weight:700;}

/* ---------- 🔎 使い方をさがす（260821） ---------- */
.ht-card{border-left:4px solid var(--blue);}
.ht-sub{font-size:12.5px; color:var(--muted); margin:2px 0 9px; line-height:1.7;}
.ht-f{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.ht-f input{flex:1 1 180px; min-width:0; padding:11px 12px; font-size:16px;
  border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink);}
.ht-body{margin-top:12px; border-top:1px solid var(--line); padding-top:10px;}
.ht-hit{padding:10px 0; border-bottom:1px solid var(--line);}
.ht-hit:last-child{border-bottom:none;}
.ht-h{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;}
.ht-h .t{font-size:13.5px; font-weight:700; flex:1 1 140px; min-width:0; overflow-wrap:anywhere;}
.ht-k{flex:none; font-size:10.5px; font-weight:800; border-radius:999px; padding:2px 8px;}
.ht-k.sys{background:var(--blue-tint); color:var(--blue);}
.ht-k.man{background:var(--line); color:var(--muted);}
.ht-link{flex:none; font-size:12px; font-weight:700; color:var(--blue); text-decoration:none;}
.ht-s{font-size:12px; color:var(--muted); margin-top:3px; line-height:1.7; overflow-wrap:anywhere;}
.ht-steps{margin:7px 0 0; padding-left:1.5em; font-size:12.5px; line-height:1.85;}
.ht-steps li{margin-bottom:2px; overflow-wrap:anywhere;}
.ht-note{display:block; font-size:11.5px; color:var(--faint); margin-top:5px;}

/* 評価確定の行に出す「判定はそろったか」の1行（260821） */
.ec-jl{margin:6px 0 2px; padding:8px 10px; border-radius:8px; font-size:12.5px; line-height:1.7;
  overflow-wrap:anywhere;}
.ec-jl.ok{background:var(--blue-tint); color:var(--blue); font-weight:700;}
.ec-jl.bad{background:var(--serious-tint); color:var(--serious); font-weight:700;}
.ec-jl.warn{background:var(--orange-tint); color:var(--orange-ink); font-weight:700;}
.ec-jd{display:inline-block; margin-left:6px; font-size:11px; font-weight:800; border-radius:999px;
  padding:2px 8px; background:var(--serious-tint); color:var(--serious);}
.ec-jd.ok{background:var(--blue-tint); color:var(--blue);}

/* 📌 この項目の手順・注意（260825・★ポータル運用「評価サイクル」タブ J列をそのまま出す）
   ★judgedLine（🔴/✅の判定）とは色を分ける。あちらは「機械が数えた事実」、
   　 こちらは「人が書いた指示」。同じ色だと、どちらが人の言葉か分からなくなる。 */
.ec-note{margin:6px 0 2px; padding:9px 11px; border-radius:8px; font-size:12.5px; line-height:1.75;
  background:var(--orange-tint); color:var(--orange-ink); border-left:3px solid var(--orange);
  overflow-wrap:anywhere; white-space:normal;}
.ec-note .h{display:block; font-weight:800; font-size:11.5px; margin-bottom:3px; letter-spacing:.02em;}

/* 画面の上に置く「運用マニュアル」への入口（社長のご要望・督促とセットで見せる） */
.ec-doc{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 10px;}
.ec-doc a{display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:999px;
  background:var(--blue-tint); color:var(--blue); border:1px solid transparent;}
.ec-doc a:hover{border-color:var(--blue);}
/* 長い備考は畳む（260821・備考を1000文字まで書けるようにしたため） */
.note-more{margin-top:2px;}
.note-more>summary{cursor:pointer; list-style:none; font-size:11.5px; color:var(--muted); line-height:1.6;}
.note-more>summary::-webkit-details-marker{display:none;}
.note-more>summary .n{color:var(--blue); font-weight:700;}
.note-full{margin-top:5px; padding:8px 10px; border-radius:8px; background:var(--bg);
  font-size:12.5px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere;}
.note-line{white-space:pre-wrap;}
/* 仕組みの実施報告（260821） */
.sys-rep{margin:8px 0 6px;}
.sys-rep textarea{width:100%; box-sizing:border-box; margin-top:3px; padding:9px 11px;
  border:1px solid var(--line); border-radius:8px; font:inherit; font-size:16px;
  line-height:1.6; resize:vertical; background:var(--card); color:var(--ink);}

/* ============================================================
   💬 タスクのやりとり（チャット）第1段（260822・従業員のご要望①）
   ------------------------------------------------------------
   ★既存の .task / .btn.sm / .note をそのまま使う。新しいのは「発言の箱」だけ。
   🚨 **吹き出しを左右に振り分けない。** 375px端末では .task .body の幅が約180pxしかなく、
   　 左右に分けると1つの発言が90pxになって日本語が2〜3文字で折り返す
   　（添付で「1件が4行に折り返して一覧が481pxになった」のと同じ失敗）。
   　 → **全幅で縦に積み、自分の発言は左の線と背景で見分ける。**
   🚨 .chat-panel は flex-basis:100% で自分の行に落ちる（.att-list と同じ作法）。
   ============================================================ */
.chat{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:5px;}
.chat-n{
  border:1.5px solid var(--line); background:var(--card); color:var(--blue);
  border-radius:8px; font-size:11.5px; font-weight:700; padding:5px 10px;
  cursor:pointer; font-family:inherit; line-height:1.2;
  display:inline-flex; align-items:center; gap:6px;
}
.chat-n:hover{filter:brightness(.97);}
.chat-n.on{background:var(--blue-tint); border-color:var(--blue-tint);}
/* 未読があるボタンは枠を濃くする（バッジだけだと下部ナビの数字と結びつかない） */
.chat-n.has{border-color:var(--serious);}
.chat-un{
  flex:none; min-width:17px; height:17px; padding:0 5px; border-radius:999px;
  background:var(--serious); color:#fff; font-size:10.5px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
/* 畳んだままでも「誰がいつ最後に発言したか」を出す＝開かずに止まっているか判断できる */
.chat-last{font-size:10.5px; color:var(--faint); font-weight:600;}

.chat-panel{
  flex:0 0 100%; display:flex; flex-direction:column; gap:7px;
  background:var(--track); border-radius:10px; padding:10px 11px; margin-top:2px;
}
.chat-load, .chat-empty, .chat-cut{font-size:11px; color:var(--faint); font-weight:600;}
.chat-err{font-size:11.5px; color:var(--serious); font-weight:700; line-height:1.7;}
.chat-retry{
  margin-top:6px; font:inherit; font-size:11.5px; font-weight:700;
  border:1.5px solid var(--serious); background:#fff; color:var(--serious);
  border-radius:8px; padding:5px 10px; cursor:pointer;
}
/* 発言の箱。全幅・縦積み。自分のものだけ色を変える（左右に振らない理由は上のコメント） */
.chat-msg{
  background:var(--card); border-radius:8px; padding:7px 10px;
  border-left:3px solid var(--line); min-width:0;
}
.chat-msg.mine{border-left-color:var(--blue); background:var(--blue-tint);}
.chat-who{font-size:10.5px; color:var(--faint); font-weight:700;}
/* 🚨 改行を保つ（質問と回答は箇条書きで書かれる）。長い英数字は body の指定で折れる */
.chat-body{font-size:12.5px; line-height:1.6; white-space:pre-wrap; margin-top:1px;}

/* 既読の1行。**一覧は作らない**（監視にしない）。淡く出す＝責める見た目にしない */
.chat-seen{font-size:10.5px; color:var(--faint); font-weight:600; padding-top:1px;}
.chat-warn{font-size:10.5px; color:var(--serious); font-weight:700; line-height:1.6;}
.chat-locked{font-size:11px; color:var(--muted); font-weight:600; line-height:1.6;}

.chat-form{margin-top:2px;}
.chat-form textarea{
  width:100%; box-sizing:border-box; padding:8px 10px;
  border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px;
  line-height:1.5; resize:vertical; background:var(--card); color:var(--ink);
}
.chat-btns{display:flex; gap:8px; justify-content:flex-end; margin-top:6px;}
.chat-form .note{margin-top:6px;}