/* ★波7-C: hidden を付けた要素は必ず消える。 .toolbar{display:flex} のような後ろの規則が [hidden] に勝ってしまい、 「続きを読む」が続きの無いときにも出ていた（検索の結果画面で実際に起きた） */ [hidden]{display:none !important;} /* KUROKO 共通の見た目（1 本だけ・設計01 D-7） */ :root{ color-scheme:light; /* ★V3A-6: UA が描く部品（select の一覧・日付ピッカー・スクロールバー）もテーマに合わせる */ --bg:#F3F5F8; --card:#FFF; --ink:#1F2836; --soft:#46516A; --mut:#5F6A83; /* ★V3A-3: 11〜13px の補助文字で 4.5:1（旧 #77819A は白地 3.9） */ --line:#E1E5EC; --teal:#17624F; --teal-bg:#E6F2ED; --field-line:#77819A; /* ★V3A-10: 入力欄の境界（SC 1.4.11 の 3:1・白地 3.9／地色 3.57）。--line は区切り線用 */ --red:#B4432A; --red-bg:#FBE7E0; --amber:#8F6410; --amber-bg:#FBF0D6; --blue:#2A5FA8; --blue-bg:#E8F0FB; --orange:#E8710A; /* ★束22 B-5 D1-09: 受信トレイの未読の点。琥珀（--p3 のチップ）とも赤（作成・危険）とも別の色。サイドバー #2E2E30 の上で 4.4:1・選択中の #454548 の上でも 3:1 以上（非文字の印＝SC 1.4.11） */ --shadow:0 1px 2px rgba(31,40,54,.05),0 8px 24px rgba(31,40,54,.08); /* ---- 色の決まり（D1-112・1 か所で定める・全画面で使う）---- 背景 3 段階: 外枠(ほぼ黒) → サイドバー(濃いグレー) → 本体(やや明るいグレー=--bg) シェル（外枠・サイドバー）はライト/ダークに関わらず常に暗色 */ --shell:#1E1F21; /* 外枠＝トップバー（実物 #1e1f21 系） */ --shell-ink:#F5F4F3; /* 外枠の文字 */ --shell-field:#3B3C3F; /* 外枠の検索欄 */ --side:#2E2E30; /* サイドバー */ --side-ink:#C9CBD1; /* サイドバーの文字（非選択） */ --side-mut:#9A9CA2; /* サイドバーの見出し（極小グレー）★V3A-13: #2E2E30 上 4.94（旧 #8A8C91 は 4.03） */ --side-on:#454548; /* 選択中＝一段明るいグレーの角丸 */ --side-hover:#3A3A3D; --coral:#F06A6A; /* 作成ボタン＝赤（コーラル） */ --sel:var(--blue); /* 選択・今日＝青 */ --primary:var(--blue); /* 主要な操作＝青 */ --ok:var(--teal); /* 完了・順調＝緑 */ --ok-bg:var(--teal-bg); --paused:var(--mut); /* 一時停止・データなし＝グレー */ --shell-h:48px; /* トップバーの高さ（実物 約48px） */ --side-w:240px; /* サイドバーの幅 */ --row-h:28px; /* 一覧 1 行の高さ（D3-04） */ /* 束20 IMPROVE4-13 / -23: 補助文の文字サイズ 2 段階と器の角丸 3 種。画面ごとの直書き（13／12.5／12／11.5、12／10／8／6）をやめ、ここ 1 か所で決める */ --fs-help:12.5px; /* 補助文（.muted・.modal .note・.hint・.upnote・.secempty） */ --fs-fine:11.5px; /* さらに小さい補足（.shelp・.panel .meta・.rolehelp） */ --r-card:10px; /* カード（.card。.pgcard の 10 と同じ） */ --r-modal:12px; /* 小窓（.modal .box） */ --r-group:6px; /* まとまり（.hlist。.sgroup の 6 と同じ） */ /* 緊急度 5 値の塗りチップ（D2-32 / D3-08・値ごとの色表 1 枚） */ --p1-bg:#F4B8B6; --p1-fg:#7E1A17; /* 至急＝赤（濃） */ --p2-bg:#F9D3CE; --p2-fg:#A43A2E; /* 高＝赤（サーモン） */ --p3-bg:#FBE7B8; --p3-fg:#7A5310; /* 中＝琥珀 */ --p4-bg:#D9E1EC; --p4-fg:#3C5170; /* 低＝青灰 */ --p5-bg:#E4E6EA; --p5-fg:#5B6270; /* 後で＝灰 */ --on-fill:#fff; /* ★K10: 塗りボタン・チェックの上に載る文字（ダークでは濃い色に差し替える） */ } @media (prefers-color-scheme: dark){ :root{ color-scheme:dark; /* ★V3A-6 */ --bg:#0E1218; --card:#191F2A; --ink:#E8EBF1; --soft:#B7C0CF; --mut:#8B95A7; --line:#2A3242; --teal:#5FBFA2; --teal-bg:#152B23; --field-line:#8B95A7; /* ★V3A-10: 5.47 */ --red:#E28D76; --red-bg:#391D13; --amber:#DFAC52; --amber-bg:#322710; --blue:#84ACE8; --blue-bg:#1B2A44; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45); --p1-bg:#5A1F1D; --p1-fg:#F6C3C1; --p2-bg:#4A2A25; --p2-fg:#F3C2B9; --p3-bg:#3E3112; --p3-fg:#F0D28A; --p4-bg:#26303E; --p4-fg:#B9C7DA; --p5-bg:#2A2F38; --p5-fg:#B6BCC7; /* ★K10: ダークでは塗りの色（緑・青・赤）を明るくしているので、白い文字だと 2.2:1 しか出ない。濃い文字に替える */ --on-fill:#0E1218; } /* ★V3A-5: UA 既定の placeholder #757575 は暗い地で 3.59。黒帯の検索欄（.tb .search input::placeholder）は詳細度で勝つのでそのまま */ input::placeholder,textarea::placeholder{color:var(--mut);opacity:1;} } *{box-sizing:border-box;margin:0;} body{ background:var(--bg); color:var(--ink); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; font-size:15px; line-height:1.7; } .wrap{max-width:960px;margin:0 auto;padding:24px 16px 60px;} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:20px;} h1{font-size:22px;margin-bottom:12px;} label{display:block;font-size:13px;color:var(--mut);margin:12px 0 4px;} input,select,textarea{ width:100%;padding:10px 12px;border:1px solid var(--field-line);border-radius:8px; /* ★V3A-10: 境界は --field-line（--line だと地に対し 1.27） */ background:var(--card);color:var(--ink);font-size:15px;font-family:inherit; /* ★V2-R05-25: UA 既定フォント任せにしない（WebKit で 5〜7px 縮む） */ } button{ padding:10px 20px;border:0;border-radius:8px;background:var(--teal);color:var(--on-fill); font-size:15px;font-weight:700;cursor:pointer;margin-top:16px;font-family:inherit; } button:hover{opacity:.9;} /* ★CEO 裁定 2026-09-04（裁定9・2026-09-04 A=1・#178.576）: 「押してほしい主な操作」（作る・登録する・保存する・探す・移す・上書きする・ログイン）は青（--primary）。 それ以外（並べ替えの ▲▼・戻す・閉じる・既読にする・復元・タブ）は既定のティールのまま＝目立たせない。 対象は ID で名指し（既定の button{} を青にすると「消す」「閉じる」まで青くなるため一括にはしない）。 確認窓の実行ボタン（.danger）は赤のまま */ #f button[type=submit], #newBtn, #add, #addTask, #mvOk, #fSave, #openSettings, #emOk:not(.danger), #addMain, #sAdd, #ccOk, #cfMine, #nlOk, #lAdd, #mSave, #piOk, #mOk, #cOk, #pwOk, #bkOk:not(.danger), #pbCreate { background:var(--primary); } /* ↑ 束21 IMPROVE4-19: 裁定文の適用漏れ 4 件を名簿に足した（#piOk 印の保存／#mOk PJ 作成／#cOk 作成して詳細を開く／#pwOk 変更する）。#acOk（完了にする）は据え置き */ /* ★波6（波5 未了 D1-113）: キーボードで進む人に「今どこにいるか」を必ず見せる。 button / input だけでなく、リンク・選択欄・文章欄・role=button の疑似ボタンまで同じ 1 つの見え方にする */ button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible, a:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible,[role="option"]:focus-visible{ outline:2px solid var(--blue);outline-offset:1px;} /* ★K10: 角丸は部品のものを使う（丸チェックが四角くなっていた） */ /* ★波7-A D1-113: :focus-visible はマウスで押したときには出ない（キーボード操作のときだけ）。 要件が挙げる「設定のタブ・管理メニュー・主な操作」は、押した後も青い枠を残して 「今どこを触ったか」を見せる＝こちらは :focus（マウスでも出る）で書く */ .sttab:focus,.hitem:focus,.srow .sact:focus,.amenu .ami:focus,.sb .it:focus,.sb .helpb:focus, .abar .abtn:focus,.atab:focus,.modal .acts button:focus,.pjsh:focus,.pjsw:focus{ outline:2px solid var(--blue);outline-offset:1px;} .tb button:focus,.tb .search input:focus{outline:2px solid #fff;outline-offset:1px;} /* ★波6（波5 未了 D1-114）: 黒いツールチップ。title 属性はブラウザ任せで遅く・見た目もばらつくので、 出したいところに data-tip を付ける（トップバーの ≡ が使っていた形を全画面へ広げる）。 触れる端末では出さない（hover が無い） */ @media (hover:hover){ [data-tip]{position:relative;} [data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%); white-space:nowrap;background:#1E1F21;color:#F5F4F3;font-size:11.5px;font-weight:400;line-height:1.4; padding:5px 8px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.25); opacity:0;visibility:hidden;transition:opacity .12s ease .35s,visibility 0s linear .47s;pointer-events:none;z-index:80;} [data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible;transition-delay:.35s,0s;} } /* ★波6（波5 未了 D1-94）: 外のサイトへ出るリンクは ↗ を付けて、押す前に分かるようにする */ a[target="_blank"]::after{content:" ↗";font-size:.85em;color:var(--mut);} /* 帯（黙って失敗しない） */ .band{border-radius:8px;padding:10px 14px;margin:12px 0;font-weight:700;display:none;} .band.show{display:block;} .band.error{background:var(--red-bg);color:var(--red);} /* ★波7-A D1-112（残り・CEO 裁定待ち）: 要件は「琥珀は緊急度『中』のチップにだけ」だが、 警告帯だけは琥珀のまま残す。青にすると「気をつけて」が「お知らせ」に見え、赤にすると エラー帯（--red）と見分けが付かなくなる＝どちらも情報が減る。条文側に例外を書くか、 別の色を決めるかは裁定が要るので、勝手に振り替えない（★ の琥珀は下で取りやめた） */ .band.warn{background:var(--amber-bg);color:var(--amber);} .band.ok{background:var(--teal-bg);color:var(--teal);} /* 各画面の見出し行（黒帯の下の本文側。ナビはシェルへ移した） */ .topbar{display:flex;align-items:center;gap:12px;padding:12px 0;margin-bottom:12px;flex-wrap:wrap;} .topbar .spacer{margin-left:auto;} /* ★K03: 空白の無い長い名前（英数字だけの 100 字など）で本文を押し広げない＝1 語でも折る */ #pname{overflow-wrap:anywhere;min-width:0;} .topbar .who{color:var(--mut);font-size:13px;} .topbar button{margin:0;padding:6px 14px;font-size:13px;background:var(--blue);} /* 束20 IMPROVE4-12: 並べ替え・種類の select（#fSort・#sort・#mySort・#fKind）は 1 つの大きさ（画面ごとの inline 指定をやめる） */ .toolbar select,.tabs select,.topbar select{width:auto;padding:6px 10px;font-size:13px;margin:0;} /* 束20 IMPROVE4-11: 白地の副次ボタン（🗂 セクション／🏷 ラベル／すべて既読にする／すべてアーカイブ）。角丸 6・余白 6/12（.tbtn と同じ）。 .topbar の中では上の .topbar button（青）に負けるので .topbar .btn2 も名指しする。色は触らない（裁定9 の名簿は不変） */ .btn2,.topbar .btn2{margin:0;padding:6px 12px;font-size:13px;background:var(--card);color:var(--soft);border:1px solid var(--line);border-radius:6px;} .btn2:hover{color:var(--ink);opacity:1;} .muted{color:var(--mut);font-size:var(--fs-help);} /* ---- Asana 実測から採用（seen_asana 2026-08-22）---- */ :root{--hover:#F3F1FB;} /* 行ホバー＝淡いラベンダー */ @media (prefers-color-scheme: dark){:root{--hover:#262238;}} /* ★K14: 読み上げにだけ渡す文字（見た目には出さない）。超過の「赤」に文字の手がかりを添えるのに使う */ .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* 完了は「丸いチェック」（左端・タスク種の署名 UI） */ .cb{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-width:0;padding:0;margin:0; border:1.6px solid var(--mut);border-radius:50%;cursor:pointer;position:relative; background:var(--card);flex:none;vertical-align:middle;} .cb:hover{border-color:var(--teal);background:var(--teal-bg);} .cb:checked{background:var(--teal);border-color:var(--teal);} .cb:checked::after{content:"✓";color:var(--on-fill);font-size:11px;font-weight:700; position:absolute;inset:0;display:flex;align-items:center;justify-content:center;} /* 束20 IMPROVE4-03: 行の小さな操作（📝🗑・↩ 戻す・見出しの ▲▼🗑）。project.html と done.html の写しをやめて 1 か所に置く。 nowrap＝完了済み画面の「↩ 戻す」が 2 行に折れない。触る画面の 32px は下の K14 の囲いに */ .icon-btn{color:var(--mut);cursor:pointer;font-size:15px;border:0;background:none;padding:2px 6px;margin:0;white-space:nowrap;} .icon-btn:hover{color:var(--blue);opacity:1;} .icon-btn.del:hover{color:var(--red);} /* 担当者未設定＝破線のゴースト（空欄の描き方の統一） */ .avt{width:24px;height:24px;border-radius:50%;background:var(--blue-bg);color:var(--blue); font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;} .avt.none{background:transparent;color:var(--mut);border:1.5px dashed var(--mut);} /* 人ごとに固定の背景色（波3 A-13 / D3-11）。どの色になるかは利用者 ID から決まる＝common.js avtClass。 同じ頭文字の 2 人が並んでも見分けられる。明暗どちらのテーマでも文字が読める組み合わせにしてある */ .avt.a0{background:#F7D4D2;color:#7E1A17;} .avt.a1{background:#FADACF;color:#8A3A24;} .avt.a2{background:#FBEBC2;color:#71510F;} .avt.a3{background:#D8EFE0;color:#17624F;} .avt.a4{background:#D6E4F7;color:#2A5FA8;} .avt.a5{background:#E2DCF7;color:#4A3C96;} .avt.a6{background:#CFEAEE;color:#14555F;} .avt.a7{background:#E1E5EC;color:#46516A;} @media (prefers-color-scheme: dark){ .avt.a0{background:#5A1F1D;color:#F6C3C1;} .avt.a1{background:#4E2A20;color:#F3C7B4;} .avt.a2{background:#3E3112;color:#F0D28A;} .avt.a3{background:#153027;color:#8FD9BF;} .avt.a4{background:#1B2A44;color:#A8C6F0;} .avt.a5{background:#272141;color:#C4B9F2;} .avt.a6{background:#12333A;color:#93D3DD;} .avt.a7{background:#2A3242;color:#C3CBD8;} } /* 左下トースト（完了・削除の「元に戻す」/ Asana 実測: 左下・✕つき） */ .toast{position:fixed;left:18px;bottom:18px;z-index:50;background:var(--ink);color:var(--bg); border-radius:10px;padding:11px 16px;font-size:13.5px;display:flex;gap:14px;align-items:center; box-shadow:0 6px 24px rgba(0,0,0,.25);animation:toastin .15s ease;} /* ★束31 A-25: 設定の小窓（60）を開いている間だけ、トーストをその上へ（吹き出し 70・ツールチップ 80 より下）。 一律に上げるとほかの小窓の上に 6 秒かぶる。:has() の無いブラウザーは今のまま（小窓の下） */ body:has(> .modal.settings) > .toast{z-index:65;} @keyframes toastin{from{transform:translateY(8px);opacity:0;}to{transform:none;opacity:1;}} /* ★V3B-22: 375 で詳細パネルを開いている間、下端のコメント欄（高さ 50px）を 6 秒間覆わない */ @media (max-width:680px){ body.panel-open .toast{bottom:72px;} } .toast .undo,.toast .x{background:none;border:0;margin:0;padding:0;font:inherit;color:var(--teal-bg);cursor:pointer;} .toast .undo{font-weight:700;text-decoration:underline;} .toast .x{color:var(--bg);opacity:.7;} /* 小窓（共有・プロジェクト作成・削除済みプロジェクト＝common.js openModal。Esc / 外側クリック / キャンセルで閉じる） */ /* ★波4.5 F-8: 高さの基準は dvh にし、はみ出したら小窓の外側で送れるようにする。 100vh はスマホでツールバーが出ている間だけ可視領域より大きく、中央揃えのせいで上下が同時にはみ出して、 見出しと下端の「保存 / 閉じる」に指が届かなくなっていた（詳細パネルで直したのと同じ罠が小窓に残っていた） */ .modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;background:rgba(20,25,35,.45);padding:16px;overflow-y:auto;} .modal .box{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-modal);box-shadow:var(--shadow); width:min(460px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:20px 22px;margin:auto 0;} /* 小窓の中の行リスト（ラベル・セクション）。件数が増えても箱が伸び続けない（波4.5 F-8・.modal .list と同じ上限） */ .modal .rows{max-height:280px;overflow:auto;} .modal h2{font-size:16px;margin:0 0 12px;} /* 小窓の中の帯（波3 R-5）: 出ていないときは場所を取らない */ .modal .band{margin:0 0 12px;font-size:13.5px;} .modal label{margin:10px 0 4px;} /* 束20 IMPROVE4-09: 小窓の入力欄の規格は type=text だけに書かれていて、同じ窓の select／datetime-local／password が 41px・39px と段違いだった。 チェック・ラジオ・ファイルと、設定の小窓の .sfield（28px・K09 で検収済み）、管理一覧の .asearch/.asel（30px の器）は除く */ .modal input:not([type=checkbox],[type=radio],[type=file],.sfield,.asearch),.modal select:not(.sfield,.asel),.modal textarea{font-size:14px;padding:8px 10px;} .modal .list{border:1px solid var(--line);border-radius:8px;max-height:280px;overflow:auto;margin-top:4px;} .modal .list label{display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line);cursor:pointer;} .modal .list label:last-child{border-bottom:0;} .modal .list label.dim{color:var(--mut);cursor:default;} .modal .list input[type=checkbox]{width:16px;height:16px;margin:0;flex:none;accent-color:var(--teal);} .modal .list .mi-sub{font-size:11.5px;color:var(--mut);margin-left:auto;white-space:nowrap;} /* ★束31 A-57: 小窓と中の一覧を送りきっても、後ろのページへスクロールを連鎖させない（束30 の .apop.vpscroll と同じ手当て） */ .modal,.modal .box,.modal .rows,.modal .list{overscroll-behavior:contain;} .modal .note{font-size:var(--fs-help);color:var(--mut);margin-top:10px;line-height:1.5;} .modal .acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:16px;} /* 束9 R01 idx22: 狭い幅では 2 つ目のボタンが次の行へ丸ごと落ちる */ .modal .acts button{margin:0;padding:8px 16px;font-size:13.5px;white-space:nowrap;} /* 束9 R01 idx22: 文言の途中で 1 文字だけ折れない */ .modal .acts .ghost{background:transparent;color:var(--soft);border:1px solid var(--line);} .modal .acts .danger{background:var(--red);} /* 確認窓の実行ボタンだけ赤（D9-67） */ .modal .foot{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);} .modal .foot a{color:var(--red);font-size:13px;cursor:pointer;text-decoration:underline;} .modal .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:14px;} .modal .row:last-child{border-bottom:0;} .modal .row .mi-sub{font-size:11.5px;color:var(--mut);} .modal .row button{margin:0;padding:5px 12px;font-size:12.5px;} /* ★束31 A-41: 削除済みプロジェクトの小窓だけ。名前の span に flex:1 が無く、ボタンと一緒に縮んで「↩ 復／元」に折れていた（束9 R01 idx22 と同じ型）。 共有の .modal .row は触らない（ラベル・セクションの小窓）。色は付けない（裁定9: ティールのまま）。空白の無い長い名前は 1 語でも折る */ #dprows .row button{white-space:nowrap;flex:none;} #dprows .row>span{min-width:0;overflow-wrap:anywhere;} /* ラベル管理の × と入力欄（波3 A-6） */ .modal .row input[type=text]{font-size:13.5px;padding:6px 9px;} .modal .row button.ldel{background:transparent;color:var(--mut);border:1px solid var(--line);font-size:14px;line-height:1;padding:5px 10px;} .modal .row button.ldel:hover{color:var(--red);border-color:var(--red);opacity:1;} .modal .empty{color:var(--mut);font-size:13px;padding:8px 2px;} /* 同時編集（波5 A-18 / D2-37）: 相手の本文と自分の本文を並べて出す箱 */ .modal .cbox{border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:13px;background:var(--bg); white-space:pre-wrap;word-break:break-word;max-height:140px;overflow:auto;} /* ===================================================================== シェル（黒トップバー＋左サイドバー・D1-01〜D1-15・common.js mountShell が差し込む） ===================================================================== */ body.has-shell{padding-top:var(--shell-h);transition:padding-left .18s ease;} body.has-shell.side-open{padding-left:var(--side-w);} /* --- トップバー（D1-01） --- */ .tb{position:fixed;top:0;left:0;right:0;height:var(--shell-h);z-index:30; background:var(--shell);color:var(--shell-ink);display:flex;align-items:center;gap:10px;padding:0 12px;} .tb button{margin:0;padding:0;border:0;background:none;color:var(--shell-ink);font-size:14px;font-weight:400;border-radius:8px;} .tb button:hover{opacity:1;background:rgba(255,255,255,.08);} .tb button:focus-visible{outline:2px solid #fff;outline-offset:1px;} .tb .hb{width:32px;height:32px;font-size:20px;line-height:1;position:relative;} /* ★束31 B-03（CEO 裁定 2026-09-16）: サイドバーが見えていない間の未読の印。D1-09 の点と同じ 8px・同じ橙（--orange）。見えている間は「受信トレイ」の点に任せる */ .tb .hb .hbdot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--orange);pointer-events:none;} body.side-open .tb .hb .hbdot{display:none;} /* ≡ の黒い吹き出し「サイドバーを非表示にする」（D1-02）は汎用 [data-tip]（上・hover:hover の囲い）に任せる。 ★V2-R05-23: 専用の規則は hover:hover の囲いが無く、タップで :hover が立つ端末では次のタップまで残っていた */ .tb .create{background:#D24343;color:#fff;border-radius:999px;padding:5px 14px 5px 12px;font-weight:700;font-size:13px;white-space:nowrap;} /* ★V3A-12: #F06A6A の上の白は 3.01。赤系（裁定9）のまま 4.54 に。--coral は管理メニューの文字色に残す */ .tb .create:hover{background:#C43B3B;} /* 5.20 */ .tb .create b{font-weight:700;margin-right:3px;} /* 中央の検索欄（D1-04 / D3-58・幅は約 1/3） */ .tb form{flex:1;display:flex;justify-content:center;min-width:0;} .tb .search{width:min(36vw,520px);min-width:0;position:relative;} .tb .search input{width:100%;height:32px;padding:0 12px 0 34px;border:0;border-radius:999px;background:var(--shell-field);color:#fff;font-size:13px;} .tb .search input::placeholder{color:#B4B6BB;} .tb .search input:focus-visible{outline:2px solid #fff;outline-offset:0;} .tb .search::before{content:"";position:absolute;left:12px;top:9px;width:11px;height:11px;border:1.8px solid #B4B6BB;border-radius:50%;} .tb .search::after{content:"";position:absolute;left:23px;top:20px;width:6px;height:1.8px;background:#B4B6BB;transform:rotate(45deg);transform-origin:left;} /* 右端＝自分の頭文字（押すと設定へ・D1-01） */ /* ★K10: 黒帯はライト／ダークに関わらず常に暗色。トークンだとダークで地色と同化して丸が消える */ .tb .me{margin-left:auto;width:32px;height:32px;border-radius:50%;background:#E8F0FB;color:#2A5FA8; font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex:none;} .tb .me:hover,.tb .me[aria-expanded="true"]{outline:2px solid rgba(255,255,255,.5);background:#E8F0FB;} /* ★V3A-7: .tb button:hover の 8% 白に負けて丸が消えていた（2.05:1） */ /* 右端のアイコンの吹き出しは右寄せ（中央寄せだと画面の外へはみ出す・波6 D1-114） */ .tb .me[data-tip]::after{left:auto;right:0;transform:none;} .tb .hb[data-tip]::after{left:0;transform:none;} /* ★V2-R05-23: 左端の ≡ は左寄せ（中央寄せだと画面の左外へ出る） */ .filters .pill:first-child[data-tip]::after{left:0;transform:none;} /* ★束31 R2-common-7: 並びの先頭のピル（未完了・A-56）の吹き出しは左寄せ（中央寄せだと本文の左端が 88px 未満＝サイドバー閉・窓幅約 1100px 未満で画面の左外へ出る・.tb .hb と同じ） */ .tb .me{padding:0;} /* ★K10: overflow:hidden だと data-tip の吹き出しが 32px の丸の中で切られ、決して出ない */ .tb .me img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;} /* --- サイドバー（D1-07 / D1-08 / D1-12 / D1-13 / D9-01） --- */ .sb{position:fixed;top:var(--shell-h);left:0;bottom:0;width:var(--side-w);z-index:29; background:var(--side);color:var(--side-ink);overflow-y:auto;padding:10px 8px 20px; transform:translateX(-100%);transition:transform .18s ease;} body.side-open .sb{transform:none;} /* ★K09: 閉じている間は Tab 順から外す（画面の外にあるリンクへ Tab で入らない） */ body:not(.side-open) .sb{visibility:hidden;transition:transform .18s ease,visibility 0s linear .18s;} .sb .hd{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--side-mut); padding:14px 10px 4px;letter-spacing:.02em;} .sb .hd button{margin:0;padding:0 6px;border:0;background:none;color:var(--side-mut);font-size:15px;line-height:1;border-radius:4px;} .sb .hd button:hover{color:#fff;background:var(--side-hover);opacity:1;} .sb .it{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;border-radius:6px;color:var(--side-ink); font-size:13.5px;text-decoration:none;white-space:nowrap;overflow:hidden;} /* ★波7-A（波7-A で気づいた分）: min-width:0 が無いと、flex の子は中身より縮まないので 長い項目名（例「削除済みプロジェクト」）でサイドバーに横スクロールが出て、… の省略も効かなかった */ .sb .it span{overflow:hidden;text-overflow:ellipsis;min-width:0;} .sb{overflow-x:hidden;} .sb .it:hover{background:var(--side-hover);color:#fff;} .sb .it.on{background:var(--side-on);color:#fff;} /* ★波7-A D9-03: 管理メニュー配下だけは「選択中＝赤い文字 1 色」（地色は付けない・太字にもしない）。 本体（マイタスク・受信トレイ・仕事）の選択中は明るいグレーの角丸のまま＝2 つの階層を見分けられる */ .sb .it.adm.on{background:none;color:var(--coral);font-weight:400;} .sb .it.adm.on:hover{background:var(--side-hover);} .sb .it svg{flex:none;width:16px;height:16px;} .sb .pjic{flex:none;width:14px;height:14px;border-radius:4px;position:relative;} /* サイドバーの外（印を選ぶ小窓・削除済みの一覧）でも同じ形になるように、器の指定はここにも置く。 ただし「リスト型の 2 本線」は sh-list のときだけ＝class を持たない既存の印（一覧の見出し）の見た目は変えない */ .pjic{display:inline-block;width:14px;height:14px;border-radius:4px;position:relative;vertical-align:-2px;} .pjic.sh-list::before{content:"";position:absolute;left:3px;right:3px;top:4px;height:1.5px;background:rgba(255,255,255,.9); box-shadow:0 3px 0 rgba(255,255,255,.9);} /* ★波7-A D1-117: 印の形は 5 種。管理者が選んだ形（projects.icon_shape）で出し分ける。 list（既定）＝実物と同じリスト型。他の形では中の 2 本線を出さない */ .pjic.sh-square{border-radius:3px;} .pjic.sh-circle{border-radius:50%;} .pjic.sh-diamond{border-radius:2px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);} .pjic.sh-triangle{border-radius:2px;clip-path:polygon(50% 4%,100% 96%,0 96%);} .pjic.sh-square::before,.pjic.sh-circle::before,.pjic.sh-diamond::before,.pjic.sh-triangle::before{display:none;} /* 印を選ぶ（作成の小窓・「印を変える」の小窓） */ .pjpick{display:flex;flex-direction:column;gap:8px;margin:4px 0 4px;} .pjrow1{display:flex;flex-wrap:wrap;gap:6px;align-items:center;} .pjsh,.pjsw{width:28px;height:28px;margin:0;padding:0;border:2px solid transparent;border-radius:6px;cursor:pointer; background:var(--bg);display:inline-flex;align-items:center;justify-content:center;flex:none;} .pjsh .pjic{background:var(--mut);} .pjsh.on,.pjsw.on{border-color:var(--ink);} .pjsh:hover,.pjsw:hover{opacity:.85;} .pjsw.auto{background:var(--bg);color:var(--mut);font-size:10px;font-weight:700;border:2px dashed var(--line);width:auto;padding:0 8px;} .pjsw.auto.on{border-style:solid;border-color:var(--ink);color:var(--ink);} /* サイドバーの PJ 行の「印を変える」（管理者だけ・☆ と同じ出し方） */ .sb .pjrow .pjset{flex:none;margin:0;padding:0 6px;background:none;border:0;color:var(--side-mut);font-size:12px; line-height:1;cursor:pointer;opacity:0;border-radius:4px;} .sb .pjrow:hover .pjset,.sb .pjrow .pjset:focus-visible,.sb .pjrow:focus-within .pjset{opacity:1;} .sb .pjrow .pjset:hover{color:#fff;background:var(--side-hover);opacity:1;} .sb .empty{font-size:12px;color:var(--side-mut);padding:4px 10px;} /* ★K14: 指で使う画面（狭い幅・触る端末）では主な操作を 24px 以上にする（WCAG 2.2 SC 2.5.8） */ @media (max-width:680px), (hover:none){ .cb{width:24px;height:24px;} .cb:checked::after{font-size:14px;} .icon-btn{min-width:32px;min-height:32px;padding:6px;} /* 束20 IMPROVE4-03: 行の 📝🗑・↩ 戻す（project.html から移した） */ .sb .addpj{min-width:32px;min-height:32px;} .sthead .stx{min-width:32px;min-height:32px;} .tb .create{min-height:28px;} /* ★V2-R05-25: WebKit の UA フォントでは 23px まで縮んでいた */ .srow .sact{min-height:28px;} .sb .pjrow .pin,.sb .pjrow .pjset{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;} /* ★V2-R05-44: ☆◧ の押し所 */ .toast .undo,.toast .x{min-height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;} /* ★束31 A-13a: 6 秒で消える「元に戻す」「✕」（基底は padding:0 で約 23px） */ .nact{min-width:32px;min-height:32px;} /* ★束31 A-13a/A-13b: 通知カードの ▾（31×21） */ .sradio{min-height:28px;} /* ★束31 A-13b: 毎日／平日のみ（label が丸と文字を包む＝行ごと押せる） */ #dprows .row button{min-height:32px;} /* ★束31 A-41: 「↩ 復元」（折れなくなると約 26〜29px） */ .fchip .fclear{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;} /* ★束31 R2-ds-6: 「絞り込み: N ×」「担当: ○○ ×」の ×（基底は 12px・約 19×14）。24px＝K14 の床・丸の高さが隣の select と同じ約 30px に収まる（32px だと丸が 38px） */ } /* 受信トレイの未読印（波5 S-6 / D1-09）: 項目の右端の「小さなオレンジの点」（本紙どおり 8px）。 ★波7-B では件数入りの琥珀のピルにしていたが、束22 B-5（LOW62 77 案A・CEO 裁定 2026-09-06）で点に戻した。 ・琥珀は緊急度「中」のチップのためだけに取っておく（D1-112）。赤は「作成」と「危険」の色なので使わない。 ・件数は消さない: 項目に吹き出し（data-tip「未読 N 件」・マウスを載せると出る）と点の aria-label で出す。 ・.sb .it は overflow:hidden（項目名の省略のため）で吹き出しが切られる（K10 と同じ根）ので、受信トレイの項目だけ overflow を戻す（項目名の省略は中の span 自身の overflow:hidden が担うので崩れない）。 ・吹き出しは右寄せ: 項目の右端に合わせ、サイドバー（overflow-x:hidden）の右外へ出ない */ .sb .it .badge{margin-left:auto;flex:none;width:8px;height:8px;border-radius:50%;background:var(--orange);} .sb .it.inbox{overflow:visible;} .sb .it.inbox[data-tip]::after{left:auto;right:0;transform:none;} /* 未読の青い点（波5 S-6 / D4-10・D3-31）: タスク名の横 */ .udot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none;margin-right:5px;vertical-align:1px;} /* お気に入り（波5 S-9 / D6-04）: PJ 行の右端の ☆。付いている行は常に見え、それ以外は触れたときだけ出す */ .sb .pjrow{display:flex;align-items:center;} .sb .pjrow .it{flex:1;min-width:0;} .sb .pjrow .pin{flex:none;margin:0;padding:0 8px;background:none;border:0;color:var(--side-mut);font-size:13px; line-height:1;cursor:pointer;opacity:0;border-radius:4px;} .sb .pjrow:hover .pin,.sb .pjrow .pin:focus-visible,.sb .pjrow:focus-within .pin,.sb .pjrow.pinned .pin{opacity:1;} /* ★波7-A D1-112: お気に入りの ★ は琥珀（#F1BD6C）をやめ、サイドバーの文字色系にする。 琥珀は緊急度「中」のチップ（--p3）のためだけに取っておく。★ と ☆ は形と明るさで区別できる */ .sb .pjrow.pinned .pin{color:var(--shell-ink);} .sb .pjrow .pin:hover{color:#fff;background:var(--side-hover);opacity:1;} /* ★K09 → V2-R05-30: 触る画面には hover が無い（タブレットでも ☆・◧ が触れる）。 ☆ の基底 opacity:0（上）より「後ろ」に置く＝同じ強さは後勝ちで、前に置くと ☆ だけ負けて消える */ @media (hover:none){ .sb .pjrow .pin,.sb .pjrow .pjset{opacity:1;} } /* ★波7-A D1-38: サイドバーの左下の丸い「?」。サイドバーが閉じているときは一緒に画面の外へ出る （.sb の transform が効いている間は、この位置指定の基準も .sb になる） */ .sb{padding-bottom:56px;} /* ★V3A-8 / IMPROVE4-05: 帯（地色・サイドバーの幅）を持たせる。PJ が画面に入りきらないとき途中の行の上に「?」だけが浮き、 その行の左 28px を押すとヘルプが開いていた。位置は旧 left:10px/bottom:12px と同じ（padding で置く）。 帯 50px < .sb の下余白 56px なので最終行は帯の上まで送れる */ .sb .sbfoot{position:fixed;left:0;bottom:0;width:var(--side-w);box-sizing:border-box;padding:10px 10px 12px;background:var(--side);} .sb .helpb{width:28px;height:28px;margin:0;padding:0;border-radius:50%;border:1px solid var(--side-hover); background:var(--side-hover);color:var(--side-ink);font-size:14px;font-weight:700;line-height:1;cursor:pointer;} .sb .helpb:hover{color:#fff;background:#4A4A4E;opacity:1;} .sb .sbfoot .helpb + .helpb{margin-left:6px;} /* ★束35C: 足の丸が 2 つ（⚙ 設定・? ヘルプ）になったので間隔だけ足す */ .sb-back{position:fixed;inset:var(--shell-h) 0 0 0;background:rgba(0,0,0,.35);z-index:28;display:none;} /* 狭い幅（≤680px・D1-15）: サイドバーは常設せず ≡ で本文の上に重ねる。本文は従来どおり 1 列 */ @media (max-width:680px){ body.has-shell.side-open{padding-left:0;} body.side-open .sb-back{display:block;} .tb .create span{display:none;} .tb .create{padding:5px 10px;} .tb .search{width:100%;} } /* ===================================================================== 絞り込みの並び（一覧・マイタスクで同じ部品＝common.js filtersHtml・波3 A-3） ===================================================================== */ .filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 14px;} /* 潰れて 1 文字ずつ折り返さないよう、縮ませない（波3 A-3）。 ★束31 A-08: 狭い幅でも横送りにせず折り返す（横送りの外に 6 欄と「絞り込み: N ×」が隠れていた）。 並びは「絞り込み」ボタンで開いたときだけ出る（一覧・マイタスクの #filterBar hidden・D3-02）＝常設で段が増えることはない */ .filters select,.filters input{width:auto;padding:6px 10px;font-size:13px;flex:none;} /* ★K04: 長いプロジェクト名で欄が最長の選択肢の幅（900px 超）に広がらない。閉じた欄では … で切れる */ .filters select{max-width:240px;text-overflow:ellipsis;} /* ★V3B-14: 固定値（100% は縮む箱に対して効かない） */ .filters input[type=date]{min-width:140px;} /* ★束21 IMPROVE4-14: 検索欄の虫眼鏡は 1 つの器（.qbox）の ::before で出す（placeholder に絵文字を書かない）。 一覧のツールバー・絞り込み欄の #fQ・検索画面の #q・管理画面の .asearch・削除済み PJ の小窓で同じ */ .qbox{position:relative;display:inline-block;} .qbox input{padding-left:26px;} .qbox::before{content:"🔍";position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--mut);pointer-events:none;} .pill{border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:12px;background:var(--card);cursor:pointer;color:var(--soft);white-space:nowrap;flex:none;} .pill.on{background:var(--teal-bg);border-color:transparent;color:var(--teal);font-weight:700;} .pill.off{opacity:.45;pointer-events:none;} .pill:focus-visible{outline:2px solid var(--blue);outline-offset:1px;} /* 今いくつ絞っているか（D3-40: 0 件の理由が「絞りすぎ」だと分かるように） */ .fchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--blue); background:var(--blue-bg);border-radius:999px;padding:3px 6px 3px 12px;white-space:nowrap;} .fchip .fclear{margin:0;background:none;border:0;color:inherit;font:inherit;cursor:pointer;font-weight:700;padding:0 6px;border-radius:999px;} .fchip .fclear:hover{background:rgba(0,0,0,.08);opacity:1;} .fclear2{margin-top:8px;padding:5px 12px;font-size:12.5px;background:var(--card);color:var(--soft);border:1px solid var(--line);border-radius:8px;} /* ===================================================================== 一覧の密度（D3-04 / D4-03）・緊急度チップ（D2-32 / D3-08） ===================================================================== */ .dense{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);} .dense th{position:sticky;top:var(--shell-h);z-index:2;background:var(--card); font-size:11px;font-weight:600;color:var(--mut);text-align:left;height:var(--row-h);padding:0 8px; border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;} .dense td{height:var(--row-h);padding:0 8px;font-size:13px;line-height:1.3;vertical-align:middle; border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;} .dense th:last-child,.dense td:last-child{border-right:0;} .dense td.tt{white-space:normal;overflow-wrap:anywhere;} /* ★K03: 空白の無い長い題名で列を広げない */ .dense td input:not(.cb),.dense td select{height:22px;padding:0 6px;font-size:13px;border-radius:5px;} .dense .addrow td{background:var(--bg);height:32px;} .dense .addrow input{height:24px;} /* 緊急度の塗りチップ（一覧・TOP・詳細で同じ部品＝common.js prioChip） */ .pc{display:inline-block;border-radius:6px;padding:0 8px;font-size:11.5px;font-weight:700;line-height:18px;white-space:nowrap;} .pc.p1{background:var(--p1-bg);color:var(--p1-fg);} .pc.p2{background:var(--p2-bg);color:var(--p2-fg);} .pc.p3{background:var(--p3-bg);color:var(--p3-fg);} .pc.p4{background:var(--p4-bg);color:var(--p4-fg);} .pc.p5{background:var(--p5-bg);color:var(--p5-fg);} /* ===================================================================== 波4 S-2: 進捗チップ（D2-33 / D3-09）とラベルの色（D2-35 / D3-09） チップの形は緊急度（.pc）と同じ部品。色だけがここで決まる ===================================================================== */ :root{ /* 進捗 2 値。淡い地色＋濃い文字（実物と同じ「淡い塗りチップ」） */ --g1-bg:#D6E4F7; --g1-fg:#2A5FA8; /* 開始前＝青系 */ --g2-bg:#D8EFE0; --g2-fg:#17624F; /* 進行中＝緑系 */ /* ラベル 8 色（DB は 0〜7 の番号だけを持ち、どの番号が何色かはここ 1 か所で決める） */ --l0-bg:#F9D7E4; --l0-fg:#8A2B52; /* 0 桃 */ --l1-bg:#F7D4D2; --l1-fg:#7E1A17; /* 1 赤ピンク */ --l2-bg:#FBEBC2; --l2-fg:#71510F; /* 2 黄 */ --l3-bg:#D8EFE0; --l3-fg:#17624F; /* 3 緑 */ --l4-bg:#D6E4F7; --l4-fg:#2A5FA8; /* 4 青 */ --l5-bg:#E2DCF7; --l5-fg:#4A3C96; /* 5 紫 */ --l6-bg:#CFEAEE; --l6-fg:#14555F; /* 6 シアン */ --l7-bg:#E1E5EC; --l7-fg:#46516A; /* 7 灰 */ } @media (prefers-color-scheme: dark){ :root{ --g1-bg:#1B2A44; --g1-fg:#A8C6F0; --g2-bg:#153027; --g2-fg:#8FD9BF; --l0-bg:#45202F; --l0-fg:#F2BDD1; --l1-bg:#5A1F1D; --l1-fg:#F6C3C1; --l2-bg:#3E3112; --l2-fg:#F0D28A; --l3-bg:#153027; --l3-fg:#8FD9BF; --l4-bg:#1B2A44; --l4-fg:#A8C6F0; --l5-bg:#272141; --l5-fg:#C4B9F2; --l6-bg:#12333A; --l6-fg:#93D3DD; --l7-bg:#2A3242; --l7-fg:#C3CBD8; } } /* 進捗チップ（common.js progressChip）。未設定は何も描かない＝この部品自体が出ない */ .gc{display:inline-block;border-radius:6px;padding:0 8px;font-size:11.5px;font-weight:700;line-height:18px;white-space:nowrap;} .gc.g1{background:var(--g1-bg);color:var(--g1-fg);} .gc.g2{background:var(--g2-bg);color:var(--g2-fg);} /* 束20 IMPROVE4-10: 小さな札（⤷ 親名・💬 N・プロジェクト名・セクション名・ラベル）。4 画面の写し（18px と 16px が混在）をやめて 1 か所に置く */ .lb{display:inline-block;font-size:11px;font-weight:400;color:var(--mut);background:var(--bg);border-radius:4px;padding:0 7px;line-height:18px;white-space:nowrap;vertical-align:middle;} /* ラベルチップ（common.js labelChip）。色は一覧・詳細・チップで同じ番号＝同じ色 */ .lb.c0{background:var(--l0-bg);color:var(--l0-fg);} .lb.c1{background:var(--l1-bg);color:var(--l1-fg);} .lb.c2{background:var(--l2-bg);color:var(--l2-fg);} .lb.c3{background:var(--l3-bg);color:var(--l3-fg);} .lb.c4{background:var(--l4-bg);color:var(--l4-fg);} .lb.c5{background:var(--l5-bg);color:var(--l5-fg);} .lb.c6{background:var(--l6-bg);color:var(--l6-fg);} .lb.c7{background:var(--l7-bg);color:var(--l7-fg);} /* ★束28 3-3 / 1-4（束27 J-06 の検証）: 記法の描画（richtext.js）の見た目と 👍 の顔の並びは 4 画面で共有する。 .mention が project.html にしか無く、受信トレイの右ペインでは @名前 が地の文と同じ色だった。index / search の行にも顔を出す */ .mention{color:var(--blue);font-weight:600;background:var(--blue-bg);border-radius:4px;padding:0 3px;} .cbody b{font-weight:700;} .cbody ul,.dv.pre ul{margin:2px 0 2px 18px;padding:0;} .faces{display:inline-flex;align-items:center;margin-left:4px;vertical-align:middle;} .faces .avt{width:16px;height:16px;font-size:8px;margin-left:-4px;} .faces .more{font-size:11px;color:var(--mut);margin-left:4px;} .lb.lkb{display:inline-flex;align-items:center;gap:3px;} .lb.lkb .faces{margin-left:0;} .lb.lkb .faces .avt:first-child{margin-left:0;} .lb.lkb .faces:empty{display:none;} /* 選択欄の中の色の点（ラベル小窓の色選び） */ .swatches{display:flex;gap:6px;flex-wrap:wrap;align-items:center;} .sw{width:22px;height:22px;border-radius:6px;border:2px solid transparent;cursor:pointer;padding:0;margin:0;flex:none;} .sw:hover{opacity:.85;} .sw.on{border-color:var(--ink);} .sw:focus-visible{outline:2px solid var(--blue);outline-offset:1px;} .sw.s0{background:var(--l0-bg);} .sw.s1{background:var(--l1-bg);} .sw.s2{background:var(--l2-bg);} .sw.s3{background:var(--l3-bg);} .sw.s4{background:var(--l4-bg);} .sw.s5{background:var(--l5-bg);} .sw.s6{background:var(--l6-bg);} .sw.s7{background:var(--l7-bg);} /* ===================================================================== 波4 S-5: 黒帯の検索のその場サジェスト（D1-05 / D3-59） 検索欄の直下に重ねて出す。押すとそのタスクの詳細が開く ===================================================================== */ .tb .search .sugg{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:31; background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);overflow:hidden;} .tb .search .sugg.open{display:block;} .tb .search .sugg .sg{display:flex;align-items:center;gap:10px;padding:8px 12px;text-decoration:none;color:var(--ink); font-size:13px;border-bottom:1px solid var(--line);} .tb .search .sugg .sg:last-of-type{border-bottom:0;} .tb .search .sugg .sg:hover,.tb .search .sugg .sg.on{background:var(--hover);} .tb .search .sugg .sg-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tb .search .sugg .sg-p{color:var(--mut);font-size:11.5px;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis;} .tb .search .sugg .sg-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* ★K10: 題名の省略（親は flex） */ .tb .search .sugg .sg-all{padding:7px 12px;font-size:11.5px;color:var(--mut);background:var(--bg);border-top:1px solid var(--line);} /* ★波7-C D3-81: 候補の直上に置く種別チップ（すべて／タスク／プロジェクト／人／ラベル）。 押した種別だけに候補を絞る。件数は種別ごとの実数 */ .tb .search .sugg .sg-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;background:var(--bg); border-bottom:1px solid var(--line);} .tb .search .sugg .sg-chip{margin:0;padding:3px 10px;font-size:11.5px;line-height:1.6;border-radius:999px; background:var(--card);color:var(--soft);border:1px solid var(--line);cursor:pointer;} .tb .search .sugg .sg-chip:hover{color:var(--ink);opacity:1;} .tb .search .sugg .sg-chip.on{background:var(--blue-bg);color:var(--blue);border-color:var(--blue);font-weight:700;} /* 行の左端に出す種別の札（どの区分の候補かが一目で分かる） */ .tb .search .sugg .sg-k{flex:none;font-size:10.5px;color:var(--mut);background:var(--bg);border-radius:4px; padding:1px 6px;white-space:nowrap;min-width:64px;text-align:center;} .tb .search .sugg .sg-t{display:flex;align-items:center;gap:6px;} /* ★V2-R05-33: 狭い幅では候補の箱を検索欄（226px）に閉じ込めず黒帯の幅いっぱいに出す。札と補足を縮めて題名に幅を渡す。 基底（上・absolute）と同じ強さなので、基底より後ろに置く（≤680 の囲いの中に書くと前になって負ける） */ @media (max-width:680px){ .tb .search .sugg{position:fixed;left:8px;right:8px;top:calc(var(--shell-h) + 4px);} .tb .search .sugg .sg-k{min-width:0;padding:1px 5px;} .tb .search .sugg .sg-p{max-width:30%;} } /* ---- 設定の中身（波5 A-20 / D1-46・D1-79・D1-90）: ラベルは小さなグレーで上に置き、入力は低めの角丸 ---- */ /* ★波7-A D1-46 / D9-74: まとまりは「薄い枠・角丸 6px・パディング 12px」のカード。 見出しは太字 12px＋グレーの補助文。2 項目並ぶところは等幅 2 カラム（gap 20px）で、 管理画面（メンバー登録・祝日の追加）の入力欄もこの同じ規約を使う */ .sgroup{border:1px solid var(--line);border-radius:6px;padding:12px;margin:0 0 12px;background:var(--card);} .sgroup .sgh{font-size:12px;font-weight:700;color:var(--ink);margin:0 0 8px;line-height:1.4;} .sgroup .sgh span{display:block;font-size:11.5px;font-weight:400;color:var(--mut);margin-top:1px;} .sgroup.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;} .sgroup.two .sgh{grid-column:1 / -1;margin:0;} @media (max-width:680px){.sgroup.two{grid-template-columns:1fr;gap:12px;}} .slab{display:block;font-size:11px;color:var(--mut);margin:0 0 4px;font-weight:400;} /* 入力の規格（D1-46: 高 28px・角丸 4px / D1-90: 選択欄は幅 150px・高 28px） */ .sfield{height:28px;padding:2px 9px;font-size:13.5px;border-radius:4px;max-width:280px;} select.sfield{height:28px;padding:2px 6px;width:150px;max-width:100%;} /* 設定の中のチェック欄（D1-90）: 14px 角・チェック時は青塗り＋白いチェック */ .scheck{appearance:none;-webkit-appearance:none;width:14px;height:14px;min-width:0;flex:none;margin:0;padding:0; border:1.5px solid var(--mut);border-radius:3px;background:var(--card);cursor:pointer;position:relative;} .scheck:checked{background:var(--blue);border-color:var(--blue);} .scheck:checked::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:var(--on-fill);font-size:10px;font-weight:700;line-height:1;} .schecklab{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);margin:0 0 6px;cursor:pointer;} /* 毎日／平日のみ の選択（D9-59: 2 択なので開いた形で見せる） */ .sradio{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);margin:0 0 6px;cursor:pointer;} .sradio input{width:14px;height:14px;min-width:0;flex:none;margin:0;padding:0;accent-color:var(--blue);} /* 通知タブのカード（D1-62 / D9-59）: [24px の絵][太字の題＋グレーの補足][右端の操作]。高さ 52〜60px・間隔 8px */ .ncardwrap{border:1px solid var(--line);border-radius:6px;background:var(--card);margin:0 0 8px;overflow:hidden;} .ncard{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;} .ncard:hover{background:var(--hover);} .nic{width:24px;height:24px;border-radius:6px;flex:none;display:inline-flex;align-items:center;justify-content:center; background:var(--blue-bg);color:var(--blue);font-size:13px;font-weight:700;} .ntxt{flex:1;min-width:0;font-size:11.5px;color:var(--mut);line-height:1.5;} .ntxt b{display:block;font-size:13px;color:var(--ink);} .nact{margin:0;padding:4px 10px;background:none;border:0;color:var(--soft);font-size:13px;line-height:1;border-radius:6px;cursor:pointer;} .nact:hover{background:var(--hover);color:var(--ink);opacity:1;} .nbody{border-top:1px solid var(--line);padding:12px 12px 2px;background:var(--bg);} .sfield[readonly]{color:var(--mut);background:var(--bg);} .sval{font-size:13.5px;font-weight:700;} .req{color:var(--red);} .shelp{font-size:var(--fs-fine);color:var(--mut);line-height:1.5;margin:4px 0 0;max-width:340px;} .ferr{display:none;font-size:11.5px;color:var(--red);margin:4px 0 0;} .ferr.show{display:block;} .lnk{display:inline-block;color:var(--blue);font-size:12.5px;cursor:pointer;background:none;border:0;padding:0;margin:0 12px 0 0;} .lnk:hover{text-decoration:underline;opacity:1;} /* ★束31 A-26: 説明文（.sinfo）の中の「プロフィール」は文中の青い文字リンク（D1-47）。規則が無く既定の button{}（ティールの塗り・129×44）で文が割れていた。 .lnk は借りない（inline-block・12.5px・右の余白・触る端末の 24px で文の行が乱れる）。下線はマウスを載せたときだけ */ .sinfo .xtab{display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--blue);font:inherit;cursor:pointer;} .sinfo .xtab:hover{text-decoration:underline;opacity:1;} .iconrow{display:flex;align-items:center;gap:16px;} .bigavt{width:76px;height:76px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center; font-size:28px;font-weight:700;background:var(--blue-bg);color:var(--blue);overflow:hidden;} .bigavt img,.avt.img img{width:100%;height:100%;object-fit:cover;display:block;} .bigavt.a0{background:#F7D4D2;color:#7E1A17;} .bigavt.a1{background:#FADACF;color:#8A3A24;} .bigavt.a2{background:#FBEBC2;color:#71510F;} .bigavt.a3{background:#D8EFE0;color:#17624F;} .bigavt.a4{background:#D6E4F7;color:#2A5FA8;} .bigavt.a5{background:#E2DCF7;color:#4A3C96;} .bigavt.a6{background:#CFEAEE;color:#14555F;} .bigavt.a7{background:#E1E5EC;color:#46516A;} /* ★K10: 大きなアバター（設定の 76px）にもダークの色。無いと同じ人が画面ごとに別の色に見える */ @media (prefers-color-scheme: dark){ .bigavt.a0{background:#5A1F1D;color:#F6C3C1;} .bigavt.a1{background:#4E2A20;color:#F3C7B4;} .bigavt.a2{background:#3E3112;color:#F0D28A;} .bigavt.a3{background:#153027;color:#8FD9BF;} .bigavt.a4{background:#1B2A44;color:#A8C6F0;} .bigavt.a5{background:#272141;color:#C4B9F2;} .bigavt.a6{background:#12333A;color:#93D3DD;} .bigavt.a7{background:#2A3242;color:#C3CBD8;} } .avt.img{background:var(--line);overflow:hidden;padding:0;} /* 設定の 1 行（D1-79）: 左に説明・右に現在の値・右端にグレーの操作リンク＋「›」。破壊的な操作も赤くしない（D1-49）。 ★波7-A D9-30: 現在の値の枠（.snow）と、行全体のホバー（薄いグレー）を足す。 押しても移動しない行には「›」を出さない＝行ごとに書き分ける（部品側では付けない） */ .srow{display:flex;align-items:center;gap:12px;padding:12px 8px;border-bottom:1px solid var(--line);border-radius:6px;} .srow:last-child{border-bottom:0;} .srow:hover{background:var(--hover);} .srow .sdesc{flex:1;min-width:0;font-size:12.5px;color:var(--soft);line-height:1.5;} .srow .sdesc b{display:block;font-size:13px;color:var(--ink);font-weight:700;word-break:break-all;} .srow .snow{font-size:12.5px;color:var(--mut);white-space:nowrap;text-align:right;} .srow .sact{background:none;border:0;color:var(--soft);font-size:12.5px;cursor:pointer; white-space:nowrap;padding:4px 6px;margin-top:0;border-radius:6px;} .srow .sact:hover{background:var(--hover);color:var(--ink);opacity:1;} .srow .sact:disabled{opacity:.45;cursor:default;} .srow .sact:disabled:hover{background:none;color:var(--soft);} /* 区画の小見出し（D1-74「メールアドレスを管理」） */ .ssec{font-size:12px;font-weight:700;color:var(--ink);margin:16px 0 2px;} /* 利用できないことの説明（D1-48）: ⓘ 付きのグレーの帯。警告色は使わない */ .sinfo{display:flex;gap:8px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:6px; padding:8px 10px;font-size:11.5px;color:var(--mut);line-height:1.5;margin:8px 0 0;} /* ---- 設定の小窓（波5 S-8 / D1-40・D1-42・D1-43・D1-44・D1-50）---- */ .modal.settings{align-items:flex-start;padding:0;} /* ★波6（波5 S-8 中）: overflow:hidden で基底の overflow:auto を潰したまま max-height だけ残っていたため、 縦に短い表示（スマホ横向き・縮めたノート PC）で下端（登録日・ログアウト行）が切れてスクロールできなかった */ .modal.settings .box{width:600px;max-width:100%;margin:48px auto 40px;padding:0;overflow:auto;position:relative; max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);} /* 選んでいるタブの高さに合わせた黒い細い縦棒は、窓そのものの左端に出す（D1-44） */ .modal.settings .box::before{content:"";position:absolute;left:0;top:var(--stbar-top,52px);width:3px;height:34px;background:var(--ink);border-radius:0 2px 2px 0;} .sthead{display:flex;align-items:center;height:44px;padding:0 14px;border-bottom:1px solid var(--line);font-size:15px;font-weight:700;} .sthead .stx{margin-left:auto;background:none;border:0;color:var(--mut);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px;} .sthead .stx:hover{background:var(--hover);color:var(--ink);opacity:1;} .stbody{display:flex;align-items:stretch;min-height:200px;} .sttabs{flex:none;width:128px;border-right:1px solid var(--line);padding:10px 6px;display:flex;flex-direction:column;gap:2px;} .sttab{background:none;border:0;text-align:left;font-size:13px;color:var(--mut);padding:8px 10px;margin:0;border-radius:6px;cursor:pointer;font-weight:400;} .sttab:hover{background:var(--hover);color:var(--ink);opacity:1;} .sttab.on{color:var(--ink);font-weight:700;background:var(--hover);} .stpane{flex:1;min-width:0;padding:16px 18px 20px;} .modal.settings .band{margin:10px 14px 0;} @media (max-width:680px){ /* 狭い幅では箱が伸びる分を .modal（overflow-y:auto）側で送る＝上限と競合させない */ .modal.settings .box{margin:0;border-radius:0;min-height:100%;max-height:none;overflow:visible;} .stbody{flex-direction:column;} .sttabs{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);} .modal.settings .box::before{display:none;} } /* ★束31 A-42: ヘルプの小窓（openModal の cls "help"）も設定と同じ見出しの帯（.sthead＋×）の器。余白は中身（.hbody）が持つ。 狭い幅では設定と同じ全画面のシート（375 で「閉じる」が y=910 の画面外だった）。共有の .modal .box は触らない（確認・共有・作成の小窓は背景で閉じられるまま）。 触る端末では「迷ったら Esc」を隠し「閉じるときは右上の ×」を出す（Esc の無い端末に Esc を案内しない） */ .modal.help .box{padding:0;} .modal.help .band{margin:10px 14px 0;} .hbody{padding:14px 22px 20px;} .htouch{display:none;} @media (hover:none){.hmouse{display:none;}.htouch{display:inline;}} @media (max-width:680px){.modal.help{padding:0;} .modal.help .box{margin:0;border-radius:0;min-height:100%;max-height:none;overflow:visible;}} /* ---- ヘルプの小窓（波6 → 波7-A で 3 リンクの縮めた版・D1-38 / D9-80）---- */ .hnav{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;} .hitem{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:9px 10px;border:1px solid var(--line); border-radius:8px;background:var(--card);color:var(--ink);font-size:13px;font-weight:400;text-align:left;cursor:pointer;} .hitem:hover{background:var(--hover);opacity:1;} .hitem.on{border-color:var(--blue);color:var(--blue);font-weight:700;} .hitem .hgt{margin-left:auto;color:var(--mut);} /* キーキャップ風の枠付きキー（D1-114） */ .kbd{display:inline-block;min-width:20px;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px; background:var(--card);color:var(--ink);font-size:11.5px;font-weight:700;line-height:1.6;text-align:center;} .kbdp{color:var(--mut);font-size:10px;padding:0 3px;} .hlist{border:1px solid var(--line);border-radius:var(--r-group);overflow:hidden;} .hrow{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:12.5px;} .hrow:last-child{border-bottom:0;} .hrow .hk{color:var(--ink);font-weight:700;} .hrow .hv{color:var(--soft);line-height:1.5;} @media (max-width:680px){.hrow{grid-template-columns:1fr;gap:2px;}} /* ---- アカウントメニュー（波5 S-8 / D1-27・D1-29・D1-37）---- */ .tb .me{border:0;cursor:pointer;margin-top:0;} .amenu{position:fixed;top:calc(var(--shell-h) + 4px);right:10px;z-index:70;width:230px;background:var(--card); border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;} .amenu hr{border:0;border-top:1px solid var(--line);margin:6px 0;} .amenu .ahead{display:flex;align-items:center;gap:10px;padding:8px 10px 6px;} .amenu .ahead b{display:block;font-size:13px;} .amenu .ahead span span{display:block;font-size:11.5px;color:var(--mut);word-break:break-all;} .amenu .ami{display:block;width:100%;text-align:left;background:none;border:0;margin:0;padding:8px 10px;border-radius:6px; font-size:13px;font-weight:400;color:var(--ink);cursor:pointer;} .amenu .ami:hover{background:var(--hover);opacity:1;} /* ---- 管理画面の器（波5 S-8 / D9-11・D9-12）---- */ .abar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;} .abar .asearch{width:240px;height:30px;padding:4px 10px 4px 26px;font-size:12.5px;border-radius:6px;} /* 左は .qbox::before の虫眼鏡ぶん（束21 IMPROVE4-14）。★束31 A-57: 220 では中身 182px に 15 字（187.5px）が入らず「…で検」で切れていた */ .abar .asel{width:auto;min-width:130px;height:30px;padding:3px 8px;font-size:12.5px;border-radius:6px;} .abar .areset{margin:0;padding:5px 10px;font-size:12px;background:none;border:1px solid var(--line);color:var(--soft);border-radius:6px;cursor:pointer;} .abar .areset:disabled{opacity:.45;cursor:default;} .abar .areset:not(:disabled):hover{background:var(--hover);color:var(--ink);opacity:1;} .abar .acount{font-size:11.5px;color:var(--mut);white-space:nowrap;} /* ★束31 A-49: 件数と 3 つのボタン（列・フィルター・ソート）は 1 つの塊（.atools）で右へ寄せる。塊は件数とボタンの間では折れてよいが、 3 つのボタン（.abtns）は 1 行のまま＝ソートだけ次の行に取り残されない（4 つを nowrap にすると 375 で 370px > 343px の横送り）。 塊に入らない件数（削除済みプロジェクトの小窓の #dpn・.abar の直下）は今までどおり自分で右へ寄る */ .abar > .acount{margin-left:auto;} .abar .atools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;} .abar .abtns{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;} @media (max-width:680px){.abar > .acount{margin-left:0;} .abar .atools{margin-left:0;justify-content:flex-start;} .abar .qbox{flex:1 1 100%;} .abar .asearch{width:100%;}} /* ★束31 A-57: 狭い幅の検索欄は 1 行いっぱい（A-14 の 16px でも案内が切れない） */ .abar .aselwrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .abar .aselwrap[hidden]{display:none;} /* ★波7-A D9-12: 件数の右の 3 ボタン（列: N／フィルター／ソート）。「列: N」は常に薄い青地 */ .abar .abtn{margin:0;padding:5px 10px;font-size:12px;background:none;border:1px solid var(--line);color:var(--soft); border-radius:6px;cursor:pointer;white-space:nowrap;} .abar .abtn:hover{background:var(--hover);color:var(--ink);opacity:1;} .abar .abtn.acols{background:var(--blue-bg);border-color:transparent;color:var(--blue);} .abar .abtn.on{background:var(--blue-bg);border-color:transparent;color:var(--blue);font-weight:700;} /* 3 ボタンの吹き出し */ .apop{position:absolute;z-index:70;min-width:190px;max-width:calc(100vw - 16px);background:var(--card);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:6px;} .apop .apoph{font-size:11px;color:var(--mut);padding:4px 8px 6px;} .apop .apopi{display:flex;align-items:center;gap:8px;width:100%;min-width:0;overflow-wrap:anywhere;margin:0;padding:7px 8px;border:0;border-radius:6px; background:none;color:var(--ink);font-size:12.5px;font-weight:400;text-align:left;cursor:pointer;} .apop .apopi:hover{background:var(--hover);opacity:1;} .apop .apopi.on{color:var(--blue);font-weight:700;} /* ★束31 A-51a: 押せない項目（削除済みの人の「パスワードを再発行」・理由は .apopn に書く）。hover（opacity:1）と同じ強さなので hover より後ろに置く。 フィルターを畳むトグルの薄い見た目（aria-pressed=false の opacity .6）は消した＝フィルターは列・ソートと同じ吹き出しで、行は畳まない（D9-96） */ .apop .apopi:disabled{opacity:.45;cursor:default;} .apop .apopi:disabled:hover{background:none;} .apop .apopn{margin-left:auto;font-size:10.5px;color:var(--mut);} /* ★束31 R2-admin-2: 押せない項目（aria-disabled・削除済みの人の「パスワードを再発行」）の理由は label の下に折り返す。 .apop は縮小幅（子の max-content）なので、理由が同じ行に 1 行で並ぶと吹き出しが約 190px から 450px 超に広がる。 行方向の flex-wrap では max-content が子の合計のまま止まらない。縦積みにして .apopn を max-width で止める（交差軸の max-content は clamp される）。 素の .apop .apopn（列の吹き出しの「外せません」）と束29 REQ-1 の見た目（文字 --mut・not-allowed）は触らない */ .apop .apopi[aria-disabled="true"]{flex-direction:column;align-items:flex-start;gap:2px;} .apop .apopi[aria-disabled="true"] .apopn{margin-left:0;max-width:220px;line-height:1.35;} /* 一覧の上のタブ（D9-10）: 選択中＝青文字＋薄い青のピル。「+」の保存タブは持たない */ .atabs{display:flex;gap:4px;margin:0 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px;} .atab{margin:0;padding:4px 12px;border:0;border-radius:999px;background:none;color:var(--mut);font-size:12.5px; font-weight:400;cursor:pointer;} .atab:hover{background:var(--hover);color:var(--ink);opacity:1;} .atab.on{background:var(--blue-bg);color:var(--blue);font-weight:700;} /* 空状態（D9-28）: 灰色の丸（占位）＋ 1 文 ＋ 行動のリンク */ .aempty{color:var(--mut);font-size:13px;padding:26px 2px;text-align:center;} .aempty .acircle{display:block;width:44px;height:44px;border-radius:50%;background:var(--line);margin:0 auto 10px;} .aempty p{margin:0 0 6px;} .aempty .alink{margin:0;padding:0;background:none;border:0;color:var(--blue);font-size:13px;font-weight:700;cursor:pointer;} .aempty .alink:hover{text-decoration:underline;opacity:1;} /* 管理メニューの下位画面（D9-48）: 小さなグレーのパンくず 1 行＋大きな題＋中央の枠付きカード 1 枚 */ .crumb{font-size:11.5px;color:var(--mut);margin:0 0 4px;} .crumb a{color:var(--mut);text-decoration:none;} .crumb a:hover{text-decoration:underline;} /* ★V2-R05-44: 触る端末では文字リンク型（設定の文字リンク・パンくず）の押し所も 24px 以上（.lnk の基底 display より後ろに置く＝後勝ち） */ @media (max-width:680px), (hover:none){ .lnk,.crumb a{min-height:24px;display:inline-flex;align-items:center;} } /* ★束31 A-13b: 設定の写真の「写真を選ぶ／削除」は隣り合う 2 つの文字リンク＝押し間違えると写真が消える。ここだけ 32px（共有の .lnk は 24px のまま） */ @media (max-width:680px), (hover:none){ .iconrow .lnk{min-height:32px;} } .pgttl{font-size:22px;font-weight:700;margin:0 0 14px;} .pgcard{max-width:560px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:18px;} .pgacts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;} .pgacts button{margin:0;padding:8px 16px;font-size:13.5px;background:var(--blue);} .pgacts .ghost{background:transparent;color:var(--soft);border:1px solid var(--line);} /* ★波7-C D2-102: 「＋ 作成」の小窓の「詳細を入れる」節（本紙 §3-2 の残り 8 項目） */ .modal .cmore{margin:10px 0 0;border-top:1px solid var(--line);padding-top:8px;} .modal .cmore summary{cursor:pointer;font-size:12.5px;color:var(--blue);padding:4px 0;} .modal .cmore summary::marker{color:var(--mut);} /* ★束25 TIME: ラベルの行数が左右で違っても入力欄の下端はそろえる（予定開始の時刻／日付が 22px ずれていた） */ .modal .cmore .c2{display:flex;gap:12px;align-items:flex-end;} .modal .cmore .c2 > span{flex:1;min-width:0;} .modal .cmore textarea{min-height:64px;} /* ★波7-C D3-40: 空状態の 2 つのボタン（左＝フィルターをクリア／右＝タスクを追加） */ .emptyacts{display:inline-flex;gap:8px;margin-top:8px;} .emptyacts .fclear2{margin:0;} .emptyacts .eadd{margin:0;padding:5px 12px;font-size:12.5px;border:0;border-radius:8px;background:var(--primary);color:var(--on-fill);} /* ★波7-C: 小窓の中のチェックの並び（作成のコラボレーター・一覧のコラボの小窓）。 input は既定で width:100% なので、そのままだと名前が 1 文字ずつ縦に折れる */ .modal .weekday-w{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;} .modal .weekday-w label{display:inline-flex;align-items:center;gap:5px;width:auto;margin:0;color:var(--soft);white-space:nowrap;} .modal .weekday-w input[type=checkbox]{width:auto;margin:0;padding:0;} /* 束25 TIME ここから ===================================================== 時間の入力（CEO 裁定 2026-09-06 (1)(2)）。候補ボタン＋時間/分の選択＋逃げ道の 1 部品。 完了の小窓・詳細の見積もり／実際・作成の小窓・一覧のセル の 5 か所がこの 1 枚を使う。 ★色は既存トークンだけ（ハッシュの直書きなし）＝ダークは :root の再定義でそのまま追随する。 この repo にはテーマを表す属性での切り替えが無い（実測）ので、属性ごとの再定義は書かない ===================================================================== */ /* ★display は書かない: .prow .ed{display:none} / .prow.editing .ed{display:block} と喧嘩させない */ .hmpick .hmlb{display:block;font-size:var(--fs-help);color:var(--mut);margin:0 0 6px;} /* ★候補は幅が変わっても 3 列のまま＝375 と PC でボタンの位置が入れ替わらない（毎日押す人が場所を覚えられる） */ .hmpick .hmchips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;} /* button{} の padding:10px 20px / margin-top:16px / font-weight:700 / ティール塗り を全部上書きする。 .pill を借りないのは、.pill.on が border-color:transparent で押された札の輪郭を失うため */ .hmpick .hmchip{margin:0;padding:0 6px;min-height:34px;border:1px solid var(--field-line);border-radius:999px; background:var(--card);color:var(--soft);font-size:12.5px;font-weight:400;line-height:1.3; display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;} .hmpick .hmchip:hover{background:var(--hover);color:var(--ink);opacity:1;} /* 選ばれている札は「色」だけに頼らない＝塗り＋枠＋太字の 3 つで分かる（WCAG 1.4.1） */ .hmpick .hmchip.on{background:var(--teal-bg);color:var(--teal);border-color:var(--teal);font-weight:700;} .hmpick .hmsel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;} .hmpick .hmsel select{width:auto;flex:1 1 96px;min-width:0;margin:0;} .hmpick .hmnone{flex:none;border-style:dashed;color:var(--mut);} .hmpick .hmfree{margin-top:6px;} .hmpick .hmfree summary{cursor:pointer;font-size:var(--fs-fine);color:var(--blue);padding:2px 0;} .hmpick .hmfree summary::marker{color:var(--mut);} .hmpick .hmfree label{display:block;margin:6px 0 4px;} .hmpick .hmfree input{width:100%;max-width:240px;} /* 「いま何が記録されるか」。高さを先に取る＝文字が出た瞬間に下のボタンが動かない */ .hmpick .hmsay{display:block;font-size:var(--fs-fine);color:var(--mut);margin-top:6px;min-height:1.5em;line-height:1.5;} .hmpick .hmsay.warn{color:var(--red);} /* ★指で触る端末: house の K14 は 24px 床・主な操作 32px（common.css の K14）だが、 ここは小さな札が 6+1 個 隣り合う唯一の面で、隣を押す事故の期待値が高い。 この部品だけ 44px を上乗せする（WCAG 2.2 SC 2.5.5 / CEO 指示「入力しやすい UI」）。K14 自体は変えない */ @media (max-width:680px), (hover:none){ .hmpick .hmchip,.hmpick .hmsel select{min-height:44px;} /* ★320 では札 1 個が 76.7px しかない（小窓）。余白と字を少しだけ詰めて「1時間30分」が切れないようにする （実測: 320 で余白 0.31px → 6.1px。3 列も 44px も崩さない） */ .hmpick .hmchip{padding:4px 6px;font-size:12px;} /* ★display:list-item のまま高さを取る。flex にすると ::marker が作られず開閉の三角が消える （＝押すと開く行だと分からなくなり、5 分でない値・24 時間超の唯一の逃げ道に辿り着けない） */ .hmpick .hmfree summary{min-height:44px;display:list-item;padding:12px 0;} } /* label{margin:12px 0 4px} と同じ段（器の見出しだけ 4px で上の組にくっついて見えていた） */ .modal .hmpick{margin-top:12px;} /* ★決定ボタンの文字は値ごとに変わる（「時間を入れずに完了」〜「0 分で完了」）。 右寄せのままだと左隣の「キャンセル」が最大 58px 横に滑り、取り消すつもりで完了を押す。最小幅で止める */ .modal .acts button#acOk{min-width:156px;} /* 束25 TIME ここまで */ /* ★束29 J-07（D3-32・D3-72）: 一覧の複数選択と一括変更 -------------------------------- 選ばれた行は「線だけ」で示す。既存の .sel（詳細を開いている行）が面の塗りなので、 塗りを使うと「選ばれている」と「開いている」が読み分けられない（塗りは 1 つの意味に取っておく）。 色は既存のトークン（--sel＝選択・今日の青）だけを使い、新しい色を作らない */ tbody tr.picked > td{box-shadow:inset 0 2px 0 var(--sel),inset 0 -2px 0 var(--sel);border-color:var(--sel);} tbody tr.picked > td:first-child{box-shadow:inset 2px 0 0 var(--sel),inset 0 2px 0 var(--sel),inset 0 -2px 0 var(--sel);} tbody tr.picked > td:last-child{box-shadow:inset -2px 0 0 var(--sel),inset 0 2px 0 var(--sel),inset 0 -2px 0 var(--sel);} .trow.picked,.board .bcard.picked{box-shadow:inset 0 0 0 2px var(--sel);border-radius:var(--r-group);border-color:var(--sel);} /* ★束36: ボードのカードも同じ見た目（塗らない・線だけ） */ /* 「☑ 選ぶ」トグル（一覧・マイタスクで同じ見た目。押している間だけ青くする＝.tbtn.on と同じ） */ #bulkMode{margin:0;padding:6px 12px;font-size:13px;background:var(--card);color:var(--soft); border:1px solid var(--field-line);border-radius:var(--r-group);white-space:nowrap;} /* 束29 FIT-14: #bulkMode（ID）が .tbtn:hover（クラス）に勝つため、隣の「絞り込み」と逆向きに薄くなっていた */ #bulkMode:hover{color:var(--ink);opacity:1;} #bulkMode.on{color:var(--blue);background:var(--blue-bg);border-color:var(--blue);font-weight:700;} /* 選んだ行の操作の帯。表の見出し（2）より上・トースト（50）／小窓（60）／吹き出し（70）より下 ★束31 A-06: left:50%＋translateX(-50%) だと縮む幅の基準が画面の半分（1280 なら 640px）になり、約 735px の帯が 2 段に折れて 6 秒のトーストが件数と先頭のボタンを覆っていた（CSS2.1 §10.3.7）。左右 0＋margin-inline:auto＋fit-content で中央に置く */ #bulkbar{position:fixed;left:0;right:0;margin-inline:auto;width:fit-content;bottom:18px;z-index:40; display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center; max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line);border-radius:10px; padding:8px 10px;box-shadow:var(--shadow);font-size:13px;} #bulkbar .bacts{display:contents;} /* 束29 FIT-5: 骨を 1 回だけ作るための入れ物。並びは今までどおり帯の直接の子 */ #bulkbar .bcount{font-weight:700;color:var(--ink);white-space:nowrap;} /* 束29 FIT-8: 送信中の文言に幅の上限が無いと、タスク名（200 文字まで）で帯が何段も伸び上がって一覧を覆う */ #bulkbar .bstat{font-size:var(--fs-fine);color:var(--mut);max-width:min(40ch,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #bulkbar .bstat.bwhy{white-space:normal;} #bulkbar button{margin:0;padding:6px 10px;font-size:13px;white-space:nowrap;} #bulkbar .ba{background:var(--card);color:var(--ink);border:1px solid var(--field-line);} #bulkbar .ba.danger{color:var(--red);border-color:var(--red);} #bulkbar .ba[disabled]{color:var(--mut);border-color:var(--line);cursor:not-allowed;} /* 束29 REQ-1: 「…」の中は body 直下の吹き出しに出るので #bulkbar の規則が当たらない。押せない見た目をここで作る */ .apop .apopi[aria-disabled="true"]{color:var(--mut);cursor:not-allowed;} .apop .apopi[aria-disabled="true"]:hover{background:none;} #bulkbar .bx{background:none;border:0;color:var(--mut);font-size:15px;line-height:1;cursor:pointer;} /* 帯が出ている間はトーストを持ち上げる（左下のトーストと帯が重ならない） */ body.bulk-on .toast{bottom:78px;} /* 束29 FIT-1: 帯は画面下に固定。本文の床も上げないと、最下行（＋ タスクを追加…）が帯の下に入ったまま出てこない */ body.bulk-on .wrap{padding-bottom:160px;} /* 束29 FIT-7: 帯（40）は詳細パネル（10）の上に出る。パネルを開いている間は左へ逃がす */ @media (min-width:901px){ body.bulk-on.panel-open #bulkbar{left:16px;right:calc(min(430px,94vw) + 16px);transform:none;max-width:none;justify-content:flex-start;width:auto;margin-inline:0;} /* 束31 A-06: 左右の指定で幅を決める（fit-content と auto の余白を戻す） */ body.bulk-on.panel-open.side-open #bulkbar{left:calc(var(--side-w) + 16px);} } /* 束29 R2-REQ-1: 900px 以下はパネルが画面の半分以上を占める（暗幕は 680px 以下だけ）＝帯を隠す。 ★幅の区切りを増やさない（束25 TIME-6）。既にある 901px の区切り（project.html の panel-open）の補集合で書く */ @media not all and (min-width:901px){ body.bulk-on.panel-open #bulkbar{display:none;} } body.bulk-on.panel-full #bulkbar{display:none;} /* 束29 FIT-13: 「選ぶモード」中は行の中の操作（丸チェック・その場編集・🗑📝）が効かない。効かない見た目にする */ body.bulk-mode tbody tr[data-id]{cursor:copy;} body.bulk-mode tbody tr[data-id] .cb, body.bulk-mode tbody tr[data-id] .icon-btn{opacity:.35;pointer-events:none;} body.bulk-mode .trow{cursor:copy;} body.bulk-mode .trow .cb, body.bulk-mode .trow .icon-btn, body.bulk-mode .trow .mv{opacity:.35;pointer-events:none;} /* ドラッグ中は帯を隠す（掴んでいる行と落とし先の見出しを覆わない） */ body.bulk-drag #bulkbar{display:none;} /* 貼り付けの下書き（D3-72）。ここでは 1 件も作らず、確かめてから作る */ .pasteblock .pbhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;} .pasteblock .pbhd strong{font-size:13px;} .pasteblock .pline{display:flex;align-items:center;gap:6px;margin:3px 0;} .pasteblock .pline input[type=text]{flex:1 1 220px;min-width:120px;} .pasteblock .pbad{color:var(--red);font-size:var(--fs-help);margin:3px 0;} .modal .pbad{color:var(--red);font-size:var(--fs-help);margin-top:10px;line-height:1.5;} .pasteblock .pnote{color:var(--mut);font-size:var(--fs-help);margin:4px 0 0;} /* ★K14 と同じ床: 指で使う画面では帯のボタンの押し所を 32px 以上にする（WCAG 2.2 SC 2.5.8） */ @media (max-width:680px), (hover:none){ #bulkbar{left:8px;right:8px;transform:none;max-width:none;bottom:10px;justify-content:flex-start;width:auto;margin-inline:0;} /* 束31 A-06: 全幅のまま */ #bulkbar button{min-height:32px;} body.bulk-on .toast{bottom:86px;} body.bulk-on .wrap{padding-bottom:200px;} /* 束29 FIT-1: 狭い幅では帯が 3 段に折り返す＝床をもっと上げる */ } /* 束29 ここまで ---------------------------------------------------------------------- */ /* 束30 見え方の記憶 ここから（オプションの吹き出し・列の幅のつまみ・J-05）-------------------------------- 色は var だけ（ダークは :root の再定義で追随）。つまみ（.rsz）の位置は各画面で決める（一覧は th の右端・マイタスクは列名の右端）。 「オプション」のボタンは隣の「☑ 選ぶ」（#bulkMode）と同じ見た目・同じ .on（列の形が既定と違う間は青） */ .rsz:hover::after,.rsz.on::after{content:"";position:absolute;top:3px;bottom:3px;left:calc(50% - 1px);width:2px;border-radius:1px;background:var(--blue);} #vpBtn{margin:0;padding:6px 12px;font-size:13px;background:var(--card);color:var(--soft); border:1px solid var(--field-line);border-radius:var(--r-group);white-space:nowrap;} #vpBtn:hover{color:var(--ink);opacity:1;} #vpBtn.on{color:var(--blue);background:var(--blue-bg);border-color:var(--blue);font-weight:700;} /* ★束30 R2 REG-3: 読み込み中に押した「オプション」は、読み終わるまで押した見た目（もう一度押す・Esc・外を押すと取り消す） */ #vpBtn[aria-busy="true"]{color:var(--blue);border-color:var(--blue);cursor:progress;} /* 保存できていないときだけ出す（帯・通知は使わない＝超過の警報と「元に戻す」を消さない） */ #vpStat{font-size:var(--fs-help);color:var(--red);} #vpStat:empty{display:none;} .apop .vplist{display:flex;flex-direction:column;} .apop .vprow{display:flex;align-items:center;gap:4px;min-height:30px;border-radius:6px;} .apop .vprow .apopi{flex:1 1 auto;width:auto;padding:5px 6px;} .apop .vprow.fixed{padding:5px 8px;gap:8px;font-size:12.5px;color:var(--mut);} .apop .vprow button{margin:0;min-width:24px;height:24px;padding:0 5px;border:1px solid var(--line);border-radius:5px; background:var(--card);color:var(--mut);font-size:11px;line-height:1;cursor:pointer;flex:none;} .apop .vprow button:hover:not(:disabled){background:var(--hover);color:var(--blue);opacity:1;} .apop .vprow button:disabled{opacity:.35;cursor:default;} .apop .vpgrip{flex:none;width:14px;text-align:center;color:var(--mut);cursor:grab;user-select:none;touch-action:none;font-size:11px;} .apop .vprow.dragging{background:var(--hover);opacity:.7;} .apop .vpnote{max-width:300px;} .apop .vpreset{margin-top:4px;color:var(--blue);} /* ★束30 R1 UX-3: 画面の高さに入らないときだけ付く（vpColsMenu が max-height を当てる）。中のスクロールをページへ連鎖させない＝ページが送られて閉じない */ .apop.vpscroll{overflow-y:auto;overscroll-behavior:contain;} /* ★束31 A-55: 画面に入らないとき（.vpscroll）だけ、注記・「既定に戻す」・知らせの塊（.vpfoot）を下端に固定し、行はその後ろを通る。 入るとき（PC・マイタスクの狭い幅）は .vpfoot に見た目を付けない＝J-05 の吹き出しの見た目はそのまま */ .apop.vpscroll .vpfoot{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);} /* ★束30 R1 UX-7: 知らせの 1 行（role=status）。幅を広げない（出た瞬間に横へずれない）・1 行分の高さを先に取る（出た瞬間に下へずれない） */ .apop .vpmsg{width:0;min-width:100%;min-height:1.5em;margin:2px 0 0;padding:0 8px;font-size:11px;color:var(--mut);} /* ★K14 と同じ床: 指で使う画面・狭い幅では ▲▼・−＋・オプションを 32px 四方に（WCAG 2.2 SC 2.5.8） */ @media (max-width:680px), (hover:none){ .apop .vprow button{min-width:32px;min-height:32px;} #vpBtn{min-height:32px;} } /* 束30 見え方の記憶 ここまで */ /* ★束31 A-14: 狭い幅・触る端末では入力欄の文字を 16px（iOS Safari は 16px 未満の欄に焦点が入ると画面を拡大する）。 ファイルの末尾・!important が要る: 無いと .filters input（0,1,1）・.tb .search input（0,2,1）・.abar .asearch（0,2,0）と 各ページの