/*
 * MARKの画面だけのCSS。FACTのトークンだけを使い、新しい色・角丸・影は増やさない。
 * 作ったものは FACT に伝える（デザインシステム README §6）。
 */

/* FACT同期の帯（全画面の上。仕様書05 4章）。色だけで伝えず「古い情報」と文字でも書く */
.syncbar{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:center;padding:var(--s1) var(--s3);
  border-bottom:1px solid var(--line);background:var(--surface);font-size:var(--t-dense);color:var(--ink-2)}
.syncbar .sb-t{font-weight:700;color:var(--ink)}
.syncbar b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.syncbar.is-warn{border-bottom-color:var(--warn)}
.syncbar .sb-w{color:var(--ink);font-weight:700}
.syncbar .sb-w::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  margin-right:var(--s0);border-radius:var(--radius-pill);background:var(--warn);color:var(--surface);font-size:12px}

/* ログイン前の画面 */
body.guest{background:var(--ground);min-height:100vh}
.guest-main{max-width:440px;margin:0 auto;padding:var(--s6) var(--s2)}
.guest-brand{font-size:var(--t-title);font-weight:700;color:var(--ink);margin-bottom:var(--s3);text-align:center}
.guest-brand span{display:block;font-size:var(--t-dense);font-weight:400;color:var(--ink-2)}
.guest-card .card-title{font-size:var(--t-head);margin:0}
.guest-links{margin-top:var(--s3);font-size:var(--t-dense)}
/* ログイン前の画面には .content が無いので、FACTの本文リンク（chrome.css .content a:not([class])）と同じ見た目を当てる */
.guest-main a:not([class]){color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* 絞り込みの横並び */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:flex-end;margin-bottom:var(--s3)}
.filters .field{margin:0;min-width:180px}

/* 項目と値の並び（詳細画面） */
.dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--s1) var(--s3);margin:0;font-size:var(--t-body)}
.dl dt{color:var(--ink-2);font-size:var(--t-dense)}
.dl dd{margin:0}
.section-gap{margin-top:var(--s4)}

/* 日本語は文節で折り返す（熟語の途中で改行しない） */
body{word-break:auto-phrase}

/* 詳細画面のカードは2列まで。長いメール・部門名は折り返す */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:var(--s3);align-items:start}
.dl dd{overflow-wrap:anywhere}
.card-body > p{margin:0 0 var(--s2)}

/* 上のバーの氏名・ロール。MARKにはまだマイページが無いのでリンクにせず div で置く。
   FACTの chrome.css は `.whoami > a` を前提にしているので、同じ幅の決まりを div にも当てる（1240px以下で120px・900px以下で隠す） */
.whoami > .who{min-width:0;max-width:170px}
@media (max-width:1240px){ .whoami > .who{max-width:120px} }
@media (max-width:900px){ .whoami > .who{display:none} }

/* ---- 工程・タスク共通画面（仕様書01 4.6） ---- */
/* 状態の札。意味の色は pos（承認済み・完了）／warn（承認待ち）／neg（差し戻し）だけ。ほかは無彩色 */
.st{display:inline-block;font-size:var(--t-dense);font-weight:700;padding:2px var(--s1);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.st-approved,.st-completed{background:var(--pos-soft);color:var(--pos)}
.st-awaiting_approval{background:var(--warn-soft);color:var(--warn)}
.st-returned{background:var(--neg-soft);color:var(--neg)}
.st-in_progress{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.st-unnecessary{background:transparent;color:var(--ink-3);text-decoration:line-through}

.proj-head{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline;color:var(--ink-2);font-size:var(--t-dense);margin-top:var(--s1)}
.proj-head b{color:var(--ink)}

/* 工程の箱。横に並べ、はみ出したら横スクロール */
.phase-board{display:flex;align-items:stretch;gap:var(--s1);overflow-x:auto;padding:var(--s0) 0 var(--s2);margin:var(--s2) 0}
.phase-box{flex:0 0 168px;display:flex;flex-direction:column;gap:var(--s0);padding:var(--s1) var(--s2);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--ink);text-decoration:none;font-size:var(--t-dense)}
.phase-box:hover{border-color:var(--line-strong)}
.phase-box.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.phase-box .pb-no{font-family:var(--mono);color:var(--ink-3)}
.phase-box .pb-name{font-weight:700;line-height:1.4}
.phase-box .st{align-self:flex-start}
.phase-box .pb-count{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-3)}

/* 左：タスク一覧／右：タスク詳細 */
.work-split{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:var(--s3);align-items:start}
@media (max-width:1100px){ .work-split{grid-template-columns:1fr} }
.task-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.task-list li + li{border-top:1px solid var(--line)}
.task-list a{display:grid;grid-template-columns:1fr auto;gap:var(--s0) var(--s1);padding:var(--s1) var(--s2);color:var(--ink);text-decoration:none}
.task-list a:hover{background:var(--surface-2)}
.task-list a.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.task-list .tl-name{font-size:var(--t-body)}
.task-list .st{align-self:start}
.task-list .tl-meta{grid-column:1 / -1;font-size:var(--t-dense);color:var(--ink-3)}
.task-list .tl-meta .num{color:var(--ink-2)}
.task-list .is-mine .tl-name{font-weight:700}

.checks{list-style:none;margin:0;padding:0}
.checks li{padding:var(--s0) 0}
.checks form{display:flex;gap:var(--s1);align-items:flex-start}
.checks .check-btn{flex:0 0 auto;width:24px;height:24px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--pos);padding:0}
.checks .check-btn[aria-pressed="true"]{background:var(--pos-soft);border-color:var(--pos)}
.checks .check-btn:disabled{cursor:default}
.checks .req-mark{font-size:var(--t-dense);color:var(--ink-3);margin-left:var(--s0)}

/* コメントと状態変化の流れ（古い順） */
.timeline{list-style:none;margin:0;padding:0}
.timeline > li{padding:var(--s1) 0;border-top:1px solid var(--line)}
.timeline .tm-head{font-size:var(--t-dense);color:var(--ink-3);display:flex;gap:var(--s1);flex-wrap:wrap}
.timeline .tm-head b{color:var(--ink)}
.timeline .tm-body{white-space:pre-wrap;margin-top:var(--s0)}
.timeline .is-log{font-size:var(--t-dense);color:var(--ink-2)}
.timeline .is-deleted .tm-body{color:var(--ink-3)}

.tabs-who{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s2)}

/* ---- サービス追加（仕様書01 4.5） ---- */
.tbl tr.is-selected td{background:var(--accent-soft)}
.plan-list{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.plan-phase + .plan-phase{border-top:1px solid var(--line)}
.plan-phase > summary{display:flex;flex-wrap:wrap;gap:var(--s0) var(--s2);align-items:baseline;padding:var(--s1) var(--s2);cursor:pointer}
.plan-phase > summary:hover{background:var(--surface-2)}
.plan-phase .pb-no{font-family:var(--mono);color:var(--ink-3)}
.plan-phase .pp-name{font-weight:700}
.plan-phase .pp-meta{font-size:var(--t-dense);color:var(--ink-2)}
.plan-phase[open] > summary{border-bottom:1px solid var(--line)}
.plan-phase .tbl{margin:0}
.tbl tr.is-excluded td{color:var(--ink-3)}

/* ---- お知らせ ---- */
.notice-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.notice-list li + li{border-top:1px solid var(--line)}
.notice-list a{display:grid;grid-template-columns:1fr auto;gap:var(--s0) var(--s2);padding:var(--s1) var(--s2);color:var(--ink);text-decoration:none}
.notice-list a:hover{background:var(--surface-2)}
.notice-list .nt-kind{font-size:var(--t-dense);color:var(--ink-2);display:flex;gap:var(--s1);align-items:center}
.notice-list .nt-at{font-size:var(--t-dense);color:var(--ink-3);grid-row:1;grid-column:2}
.notice-list .nt-msg{grid-column:1 / -1}
.notice-list .is-unread .nt-msg{font-weight:700}
/* 未読は色だけで伝えず「未読」と文字でも書く */
/* 朝の期限のまとめの内訳（仕様書04 6.6 No.3） */
.notice-list .nt-items{list-style:none;margin:0;padding:0 var(--s2) var(--s1);display:grid;gap:var(--s0);font-size:var(--t-dense)}
.notice-list .nt-items li + li{border-top:0}
.notice-list .nt-items li{display:flex;flex-wrap:wrap;gap:0 var(--s1);align-items:baseline}
.notice-list .nt-items a{display:inline;padding:0;color:var(--accent);text-decoration:underline}
.notice-list .nt-items a:hover{background:none}
.notice-list .nt-item-kind{color:var(--ink-2);font-weight:700}
.notice-list .nt-item-hidden{color:var(--ink-3)}
.notice-list .nt-dot{font-size:12px;font-weight:700;padding:0 var(--s0);border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent)}
.nav-item .nav-cnt{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700;padding:0 var(--s1);border-radius:var(--radius-pill);background:var(--accent);color:var(--surface)}
/* 工程名が長い箱に全体が引っ張られないよう、名前は2行で止める（全文は title） */
.phase-box .pb-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tbl .cell-sub{display:block;font-size:var(--t-dense);color:var(--ink-3)}

/* ホーム（仕様書04 v2 4.2） */
.home-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s2);margin-bottom:var(--s4)}
.home-admin .stat{display:block;color:inherit;text-decoration:none}
.home-admin .stat:hover{border-color:var(--accent)}
.home-frame{margin-bottom:var(--s4)}
.home-frame-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s1)}
.home-frame-head h2{font-size:var(--t-head);font-weight:700}
.home-count{margin-left:var(--s1);font-size:var(--t-dense);color:var(--ink-3);font-weight:400}
.home-frame.is-alert .tbl-wrap{border-color:var(--warn)}
.tbl tr.is-overdue td:first-child a{color:var(--neg)}
.home-links{margin-top:var(--s2);padding-left:1.2em;line-height:var(--lh-read)}

/* 課題（仕様書07 v2 4.1〜4.3） */
.issue-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s3);align-items:start}
.issue-grid aside .card + .card{margin-top:var(--s2)}
.issue-grid > div > .card + .card{margin-top:var(--s3)}
.issue-body{white-space:pre-wrap;overflow-wrap:anywhere}
.issue-meta{display:grid;grid-template-columns:auto 1fr;gap:var(--s0) var(--s2);font-size:var(--t-dense)}
.issue-meta dt{color:var(--ink-3)}
.issue-children{padding-left:1.4em;line-height:var(--lh-read)}
@media (max-width: 960px){.issue-grid{grid-template-columns:1fr}}

/* 社内用ガント（仕様書08 v2 4章 No.1・6.10） */
.g-summary{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin:var(--s2) 0;font-size:var(--t-dense);color:var(--ink-2)}
.g-legend{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-bottom:var(--s2);font-size:var(--t-dense);color:var(--ink-2)}
.g-legend span{display:inline-flex;align-items:center;gap:6px}
.g-sw{display:inline-block;width:18px;height:10px;border-radius:3px}
.g-wrap{overflow-x:auto}
.g-grid{min-width:calc(280px + var(--days) * var(--w));font-size:var(--t-dense)}
.g-head,.g-row > summary,.g-task{display:grid;grid-template-columns:280px calc(var(--days) * var(--w))}
.g-row > summary{list-style:none;cursor:pointer}
.g-row > summary::-webkit-details-marker{display:none}
.g-row{border-top:1px solid var(--line)}
.g-section{display:grid;grid-template-columns:280px calc(var(--days) * var(--w));border-top:2px solid var(--line);background:var(--surface-2)}
.g-section .g-label{background:var(--surface-2);font-weight:700;color:var(--ink-2)}
.g-section .g-track{min-height:28px}
.g-label{position:sticky;left:0;z-index:2;background:var(--surface);padding:6px var(--s2);border-right:1px solid var(--line);min-width:0}
.g-head .g-label{font-weight:700;color:var(--ink-2)}
.g-name{display:block;font-weight:700;overflow-wrap:anywhere}
.g-row > summary .g-name::before{content:"▸ ";color:var(--ink-3)}
.g-row[open] > summary .g-name::before{content:"▾ "}
.g-sub{display:block;color:var(--ink-3);font-size:var(--t-dense)}
.g-task .g-label{padding-left:calc(var(--s2) + 1.2em)}
.g-track{position:relative;min-height:44px}
.g-head .g-track{min-height:40px;background:var(--surface-2)}
.g-off{position:absolute;top:0;bottom:0;width:var(--w);background:var(--surface-2)}
.g-head .g-off{background:var(--line)}
.g-month{position:absolute;top:2px;font-weight:700;padding-left:2px}
.g-tick{position:absolute;bottom:2px;color:var(--ink-3);padding-left:2px;font-family:var(--mono)}
.g-today{position:absolute;top:0;bottom:0;width:2px;background:var(--neg);z-index:1}
.g-bar{position:absolute;top:14px;height:16px;border-radius:4px;background:var(--line)}
.g-bar.is-approved,.g-sw.is-approved{background:var(--pos)}
.g-bar.is-in_progress,.g-bar.is-awaiting_approval,.g-sw.is-in_progress{background:var(--accent)}
.g-bar.is-not_started,.g-sw.is-not_started{background:var(--ink-3);opacity:.45}
.g-bar.is-returned,.g-sw.is-returned{background:var(--warn)}
.g-bar.is-held,.g-sw.is-held{background:repeating-linear-gradient(45deg,var(--warn) 0 4px,transparent 4px 8px);border:1px solid var(--warn)}
.g-bar.is-forecast,.g-sw.is-forecast{background:transparent;border:2px dashed var(--neg)}
.g-done{position:absolute;top:10px;width:var(--w);text-align:center;color:var(--pos);font-weight:700;z-index:1}
.g-dia{position:absolute;top:10px;width:var(--w);text-align:center;color:var(--ink);z-index:1}
.g-legend .g-dia{position:static}
/* 当初の予定（仕様書08 6.10 No.1）：工程の当初の終わりに細い縦線 */
.g-base{position:absolute;top:4px;bottom:4px;width:2px;background:var(--ink-3);z-index:1}
.g-legend .g-base{position:static;display:inline-block;height:12px;vertical-align:middle;margin-right:4px}
/* 先方用ガント（ログイン不要のページ） */
.cg-main{max-width:none;margin:0 auto;padding:var(--s4) var(--s3)}
.cg-head{margin-bottom:var(--s3)}
.cg-changes{margin:var(--s2) 0 var(--s3)}
.g-dot{position:absolute;top:16px;width:12px;height:12px;margin-left:2px;border-radius:50%;background:var(--accent)}
.g-dot.is-done{background:var(--pos)}
.g-dot.is-late{background:var(--neg)}
.g-bulk{margin-bottom:var(--s3)}
.g-bulk > summary{cursor:pointer;list-style:none}
.g-bulk-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s2);margin:var(--s2) 0}