/* =====================================================================
   TIES デザインの決まり ― 部品の元（ties.css）
   方向：案1「紙と紺・落ち着いた上質」（前田 2026-10-22 決定）
   説明は同じフォルダの「決まり.md」。見本は「見本\」。

   使い方：<link rel="stylesheet" href="ties.css"> を読み込み、
           下の t- で始まるクラスを使う。色や大きさを直書きしない（変数を使う）。
   社長用（パソコンで情報を多く見る画面）は <body class="t-admin"> にする。
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@600&display=swap");

/* ---------------------------------------------------------------------
   1. 変数（決まりの数字はここだけ）
   --------------------------------------------------------------------- */
:root{
  /* 書体 */
  --t-font: "Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;
  --t-font-head: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;

  /* 会社の色 */
  --t-brand: #21348C;        /* TIES の紺。主役のボタン・選ばれている物・進み具合 */
  --t-brand-hover: #1A2A73;
  --t-brand-press: #142160;
  --t-brand-soft: #E6E9F4;   /* 紺のうすい地（札・選ばれている行） */
  --t-navy: #13203D;         /* 深い紺。表紙・大きな帯だけ */
  --t-gold: #A7884F;         /* くすんだ金。細い線・小さな印だけ。1画面に1〜2か所まで */
  --t-on-brand: #FFFFFF;

  /* 地と線 */
  --t-bg: #F6F4EF;           /* 生成りの地 */
  --t-surface: #FFFFFF;      /* カード */
  --t-surface-2: #FBFAF7;    /* パソコンの左の帯・表の見出し */
  --t-sunken: #EFECE5;       /* へこんだ所（部屋のボタン・選ばれている左の帯） */
  --t-line: #E5E0D6;         /* ふつうの線 */
  --t-line-strong: #CFC8BA;  /* 2番手のボタンの枠・へこみの上の線 */
  --t-line-input: #958E80;   /* 入力欄・選択肢の枠（白の上で 3 倍以上。外の明るい所でも境目が見える） */

  /* 文字の色 */
  --t-ink: #1C2230;          /* 本文 */
  --t-ink-2: #454B58;        /* 説明文 */
  --t-sub: #646A77;          /* 補足・日付・ラベル */
  --t-faint: #8A8F99;        /* 入力欄の薄い例文だけ */

  /* 状態の色（札・知らせだけに使う。地や大きな面には使わない） */
  --t-done: #2E6B4E;  --t-done-bg: #E4EFE8;   /* 済 */
  --t-todo: #555C6B;  --t-todo-bg: #ECEDF0;   /* まだ */
  --t-warn: #B23A2A;  --t-warn-bg: #F7E4DF;   /* 注意・期限切れ・エラー */
  --t-warn-tint: #FFFBFA;  --t-warn-line: #E3B9B0;  /* 注意の知らせの地／取り消すボタンの枠 */
  --t-done-on-dark: #9FD3B6;                      /* 深い紺の上の「済」の印（小さな知らせ） */
  --t-wait: #8A5A00;  --t-wait-bg: #F6ECD6;   /* 確認待ち */
  --t-doing: #21348C; --t-doing-bg: #E6E9F4;  /* 作業中 */

  /* 種類の色（工種など。点・頭文字の四角だけに使う。文字や面には使わない）※ 難波さんの PM Hub の「プロジェクトの色の点」をまねた */
  --t-cat-kaitai: #21348C; --t-cat-kaitai-bg: #E6E9F4;   /* 解体 */
  --t-cat-zousei: #785A2C; --t-cat-zousei-bg: #F3ECDF;   /* 造成 */
  --t-cat-gaikou: #2E6B4E; --t-cat-gaikou-bg: #E4EFE8;   /* 外構 */
  --t-cat-other:  #646A77; --t-cat-other-bg:  #ECEDF0;   /* そのほか */

  /* 文字の大きさ（この8段だけ使う） */
  --t-fs-12: 12px; --t-fs-13: 13px; --t-fs-14: 14px; --t-fs-16: 16px;
  --t-fs-18: 18px; --t-fs-20: 20px; --t-fs-24: 24px; --t-fs-30: 30px;

  /* 余白（4 の倍数。ふだんは 8 の倍数） */
  --t-s-4: 4px; --t-s-8: 8px; --t-s-12: 12px; --t-s-16: 16px; --t-s-20: 20px;
  --t-s-24: 24px; --t-s-32: 32px; --t-s-40: 40px; --t-s-48: 48px; --t-s-64: 64px;

  /* 角・影 */
  --t-r-sm: 6px;             /* 札 */
  --t-r: 10px;               /* ボタン・入力欄・カード */
  --t-r-lg: 14px;            /* 下から出る画面 */
  --t-shadow-float: 0 8px 24px rgba(19,32,61,.12), 0 1px 3px rgba(19,32,61,.08); /* 浮いている物だけ */

  /* 押せる物の高さ */
  --t-h-btn: 52px;           /* 社員のスマホ。指で押しやすい */
  --t-h-input: 52px;
  --t-h-row: 64px;           /* 一覧の1行 */

  /* 幅 */
  --t-w-content: 1080px;
  --t-w-side: 240px;
  --t-gutter: 16px;          /* スマホの左右の余白 */
}

/* 社長用（パソコンで情報を多く見る画面）：少し小さく・つめる */
.t-admin{
  --t-h-btn: 44px; --t-h-input: 44px; --t-h-row: 52px;
  font-size: var(--t-fs-14);
}

/* ---------------------------------------------------------------------
   2. 土台
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--t-bg);color:var(--t-ink);font-family:var(--t-font);font-size:var(--t-fs-16);
  line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-break:strict;word-break:auto-phrase;text-wrap:pretty}  /* 1文字だけ次の行に落ちるのを防ぐ（効くのは Chrome・Edge。iPhone は文を短くして防ぐ） */
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset,legend{margin:0;padding:0}
fieldset{border:0;min-width:0}
code{font-family:inherit}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img,svg{display:block;max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--t-brand);outline-offset:2px;border-radius:4px}

/* 文字 */
.t-h1{font-family:var(--t-font-head);font-weight:600;font-size:var(--t-fs-24);line-height:1.4;letter-spacing:.06em;font-feature-settings:"palt"}
.t-h2{font-size:var(--t-fs-16);font-weight:700;line-height:1.5;letter-spacing:.04em}
.t-h3{font-size:var(--t-fs-14);font-weight:700;line-height:1.5;color:var(--t-ink-2);letter-spacing:.04em}
.t-lead{font-size:var(--t-fs-16);color:var(--t-ink-2)}
.t-small{font-size:var(--t-fs-13);color:var(--t-sub)}
.t-tiny{font-size:var(--t-fs-12);color:var(--t-sub)}
.t-sub{color:var(--t-sub)}
.t-strong{font-weight:700}
.t-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.t-big-num{font-size:var(--t-fs-30);font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.t-link{color:var(--t-brand);font-weight:500}
.t-link:hover{text-decoration:underline;text-underline-offset:3px}

/* アイコン（線のアイコン・24 の方眼・太さ 1.75） */
.t-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.t-ic--sm{width:16px;height:16px}
.t-ic--lg{width:28px;height:28px}

/* ---------------------------------------------------------------------
   3. 画面の枠（スマホ：上の帯＋下のタブ ／ パソコン：左の帯＋中身）
   --------------------------------------------------------------------- */
.t-app{min-height:100vh}
.t-side{display:none}
.t-main{padding:0 var(--t-gutter) 112px;max-width:var(--t-w-content);margin:0 auto}
.t-main--form{padding-bottom:136px}

.t-top{position:relative;display:flex;align-items:center;gap:var(--t-s-8);height:64px}
.t-top__logo{height:20px;width:auto;margin-right:auto}
.t-top__back{display:inline-flex;align-items:center;gap:4px;height:44px;margin-left:-8px;padding:0 8px;color:var(--t-brand);font-weight:500;margin-right:auto}
.t-top__title{position:absolute;left:50%;transform:translateX(-50%);font-weight:700;font-size:var(--t-fs-16)}

.t-page-head{padding:var(--t-s-16) 0 var(--t-s-24)}
.t-page-head__date{font-size:var(--t-fs-13);color:var(--t-sub);letter-spacing:.04em}
.t-page-head .t-h1{margin-top:var(--t-s-4)}
.t-page-head__rule{display:block;width:28px;height:2px;background:var(--t-gold);margin-top:var(--t-s-12)}
.t-page-head__lead{margin-top:var(--t-s-8);color:var(--t-ink-2);font-size:var(--t-fs-14)}

.t-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);
  height:calc(72px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.94);border-top:1px solid var(--t-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.t-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--t-s-4);font-size:var(--t-fs-12);font-weight:500;color:var(--t-sub)}
.t-tabbar a[aria-current="page"]{color:var(--t-brand)}

/* 下に固定する主役のボタン（入力の画面） */
.t-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:var(--t-s-12) var(--t-gutter) calc(var(--t-s-12) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);border-top:1px solid var(--t-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.t-actionbar__in{max-width:640px;margin:0 auto;display:flex;gap:var(--t-s-8)}
.t-actionbar__in .t-btn{flex:1}

@media (min-width:960px){
  .t-app{display:grid;grid-template-columns:var(--t-w-side) minmax(0,1fr)}
  .t-side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:var(--t-s-24) var(--t-s-16);
    background:var(--t-surface-2);border-right:1px solid var(--t-line)}
  .t-side__logo{height:22px;width:auto;margin:4px 12px var(--t-s-32);align-self:flex-start}
  .t-side__nav{display:grid;gap:2px}
  .t-side__nav a{display:flex;align-items:center;gap:var(--t-s-12);height:44px;padding:0 var(--t-s-12);border-radius:var(--t-r);
    font-size:var(--t-fs-14);font-weight:500;color:var(--t-ink-2)}
  .t-side__nav a:hover{background:var(--t-sunken)}
  .t-side__nav a[aria-current="page"]{background:var(--t-sunken);color:var(--t-ink)}
  .t-side__nav a[aria-current="page"] .t-ic{color:var(--t-brand)}
  .t-side__foot{margin-top:auto;padding:0 var(--t-s-12);font-size:var(--t-fs-12);color:var(--t-sub)}
  .t-main{padding:0 var(--t-s-40) var(--t-s-48);margin:0;width:100%}
  .t-main--form{padding-bottom:var(--t-s-48)}
  .t-top{height:72px}
  .t-top__logo{visibility:hidden}
  .t-page-head{padding:var(--t-s-8) 0 var(--t-s-32)}
  .t-page-head .t-h1{font-size:var(--t-fs-30)}
  .t-tabbar{display:none}
  .t-actionbar{position:static;padding:var(--t-s-24) 0 0;background:none;border:0;backdrop-filter:none}
  .t-actionbar__in{max-width:none;justify-content:flex-end}
  .t-actionbar__in .t-btn{flex:none;min-width:200px}
  .t-only-phone{display:none !important}
}
@media (max-width:959px){ .t-only-pc{display:none !important} }

/* 並べ方 */
.t-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--t-s-16)}
.t-stack--8{gap:var(--t-s-8)}
.t-stack--24{gap:var(--t-s-24)}
.t-row{display:flex;align-items:center;gap:var(--t-s-8)}
.t-row--between{justify-content:space-between}
.t-row--wrap{flex-wrap:wrap}
.t-grow{flex:1;min-width:0}
.t-mt-8{margin-top:var(--t-s-8)} .t-mt-16{margin-top:var(--t-s-16)} .t-mt-24{margin-top:var(--t-s-24)} .t-mt-32{margin-top:var(--t-s-32)}

/* ---------------------------------------------------------------------
   4. カード
   --------------------------------------------------------------------- */
.t-card{background:var(--t-surface);border:1px solid var(--t-line);border-radius:var(--t-r);padding:var(--t-s-20)}
.t-card--flush{padding:0}
.t-card--flush > .t-card__head{padding:var(--t-s-20) var(--t-s-20) var(--t-s-8);margin:0}
.t-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--t-s-12);margin-bottom:var(--t-s-12)}
.t-card__more{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;font-size:var(--t-fs-13);font-weight:500;color:var(--t-brand)}
.t-card__count{font-size:var(--t-fs-13);color:var(--t-sub)}
@media (min-width:960px){
  .t-card{padding:var(--t-s-24)} .t-card--flush{padding:0} .t-card--flush > .t-card__head{padding:var(--t-s-24) var(--t-s-24) var(--t-s-8)}
}

/* ---------------------------------------------------------------------
   5. ボタン（1画面に主役は1つ）
   --------------------------------------------------------------------- */
.t-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--t-s-8);min-height:var(--t-h-btn);padding:0 var(--t-s-20);
  border-radius:var(--t-r);border:1px solid transparent;font-size:var(--t-fs-16);font-weight:700;letter-spacing:.04em;line-height:1.3;
  white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent}
.t-btn--main{background:var(--t-brand);color:var(--t-on-brand)}
.t-btn--main:hover{background:var(--t-brand-hover)}
.t-btn--main:active{background:var(--t-brand-press)}
.t-btn--sub{background:var(--t-surface);color:var(--t-ink);border-color:var(--t-line-strong)}
.t-btn--sub:hover{background:var(--t-surface-2);border-color:var(--t-sub)}
.t-btn--ghost{color:var(--t-brand);padding:0 var(--t-s-12)}
.t-btn--ghost:hover{background:var(--t-brand-soft)}
.t-btn--danger{background:var(--t-surface);color:var(--t-warn);border-color:var(--t-warn-line)}
.t-btn--block{display:flex;width:100%}
.t-btn--sm{min-height:44px;padding:0 var(--t-s-12);font-size:var(--t-fs-14);font-weight:500}  /* 小さくても押せる所は 44 */
.t-btn[disabled],.t-btn.is-disabled{background:var(--t-sunken);color:var(--t-faint);border-color:transparent;cursor:not-allowed}
.t-btn.is-loading{pointer-events:none;opacity:.85}
.t-btn.is-loading::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:t-spin .8s linear infinite}

.t-iconbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--t-r);color:var(--t-sub);position:relative}
.t-iconbtn:hover{background:var(--t-sunken);color:var(--t-ink)}
.t-iconbtn__dot{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--t-warn);box-shadow:0 0 0 2px var(--t-bg)}

.t-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:var(--t-fs-12);font-weight:700;
  background:var(--t-brand-soft);color:var(--t-brand)}

/* 部屋の入口（ホームのタイル） */
.t-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--t-s-8)}
.t-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--t-s-8);height:88px;border-radius:var(--t-r);
  background:var(--t-sunken);font-size:var(--t-fs-14);font-weight:500}
.t-tile .t-ic{color:var(--t-brand)}
.t-tile:active{background:var(--t-line)}

/* ---------------------------------------------------------------------
   6. 状態の札
   --------------------------------------------------------------------- */
.t-badge{display:inline-flex;align-items:center;gap:var(--t-s-4);height:24px;padding:0 var(--t-s-8);border-radius:var(--t-r-sm);flex:none;
  font-size:var(--t-fs-12);font-weight:700;letter-spacing:.06em;white-space:nowrap;line-height:1}
.t-badge--done{background:var(--t-done-bg);color:var(--t-done)}
.t-badge--todo{background:var(--t-todo-bg);color:var(--t-todo)}
.t-badge--warn{background:var(--t-warn-bg);color:var(--t-warn)}
.t-badge--wait{background:var(--t-wait-bg);color:var(--t-wait)}
.t-badge--doing{background:var(--t-doing-bg);color:var(--t-doing)}
/* AI が動いた・作った印（金の小さな四角）。文字は「AI 下書き」「AI が読み取り」など */
.t-badge--ai{background:var(--t-surface);color:var(--t-ink-2);border:1px solid var(--t-line-input)}
.t-badge--ai::before{content:"";width:6px;height:6px;background:var(--t-gold);transform:rotate(45deg)}

/* ---------------------------------------------------------------------
   7. 一覧・項目と値・表
   --------------------------------------------------------------------- */
.t-list > li,.t-list > a,.t-list__item{display:flex;align-items:center;justify-content:space-between;gap:var(--t-s-12);
  min-height:var(--t-h-row);padding:var(--t-s-12) 0;border-top:1px solid var(--t-line)}
.t-list > :first-child{border-top:0}
.t-card--flush .t-list > li,.t-card--flush .t-list > a,.t-card--flush .t-list__item{padding-left:var(--t-s-20);padding-right:var(--t-s-20)}
@media (min-width:960px){ .t-card--flush .t-list > li,.t-card--flush .t-list > a,.t-card--flush .t-list__item{padding-left:var(--t-s-24);padding-right:var(--t-s-24)} }
a.t-list__item:hover,.t-list > a:hover{background:var(--t-surface-2)}
/* 選ばれている行（パソコンで左に一覧・右に詳細のときだけ色を付ける） */
@media (min-width:960px){
  .t-list__item.is-current{background:var(--t-brand-soft);box-shadow:inset 3px 0 0 var(--t-brand)}
  .t-list__item.is-current .t-badge,.t-list__item.is-current .t-mono{background:var(--t-surface)}
  .t-list__item.is-current .t-list__sub{color:var(--t-ink-2)}
}
.t-list__title{font-size:var(--t-fs-16);font-weight:500;line-height:1.5}
.t-list__sub{font-size:var(--t-fs-13);color:var(--t-sub);margin-top:2px}
.t-list__chev{color:var(--t-line-strong)}

.t-kv{display:grid;grid-template-columns:7em 1fr}
.t-kv dt,.t-kv dd{padding:var(--t-s-12) 0;border-top:1px solid var(--t-line);line-height:28px}
.t-kv dt:first-of-type,.t-kv dd:first-of-type{border-top:0}
.t-kv dt{font-size:var(--t-fs-13);color:var(--t-sub);padding-right:var(--t-s-16)}
.t-kv dd{font-weight:500}

.t-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.t-table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--t-fs-14)}  /* スマホでは横にずらして見る */
.t-table td{white-space:nowrap}
.t-table td.is-wrap{white-space:normal}
.t-table th{position:sticky;top:0;text-align:left;font-size:var(--t-fs-12);font-weight:700;color:var(--t-sub);letter-spacing:.06em;
  background:var(--t-surface-2);padding:var(--t-s-8) var(--t-s-12);border-bottom:1px solid var(--t-line);white-space:nowrap}
.t-table td{height:var(--t-h-row);padding:var(--t-s-8) var(--t-s-12);border-bottom:1px solid var(--t-line);vertical-align:middle}
.t-table th:first-child,.t-table td:first-child{padding-left:var(--t-s-20)}
.t-table th:last-child,.t-table td:last-child{padding-right:var(--t-s-20)}
@media (min-width:960px){ .t-table th:first-child,.t-table td:first-child{padding-left:var(--t-s-24)} .t-table th:last-child,.t-table td:last-child{padding-right:var(--t-s-24)} }
.t-table tr:last-child td{border-bottom:0}
.t-table tbody tr:hover td{background:var(--t-surface-2)}
.t-table .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-table tfoot td{font-weight:700;border-top:1px solid var(--t-line-strong);border-bottom:0}

/* 進み具合 */
.t-progress{height:4px;background:var(--t-sunken);border-radius:2px;overflow:hidden}
.t-progress > span{display:block;height:100%;background:var(--t-brand);border-radius:2px}

/* 書類などの手順（1→2→3） */
.t-steps > li{display:flex;align-items:center;gap:var(--t-s-12);min-height:52px;border-top:1px solid var(--t-line)}
.t-steps > li:first-child{border-top:0}
.t-steps__mark{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;border:1.5px solid var(--t-line-strong);color:transparent}
.t-steps__mark .t-ic{width:14px;height:14px;stroke-width:2.5}
.t-steps > li.is-done .t-steps__mark{background:var(--t-done);border-color:var(--t-done);color:var(--t-on-brand)}
.t-steps > li.is-done .t-steps__name{color:var(--t-sub)}
.t-steps__name{flex:1}

/* 切り替え（すべて／作業中／まだ…） */
.t-seg{display:flex;gap:var(--t-s-4);padding:var(--t-s-4);background:var(--t-sunken);border-radius:var(--t-r);overflow-x:auto}
.t-seg button{flex:1;min-height:44px;padding:0 var(--t-s-12);border-radius:var(--t-r-sm);border:1px solid transparent;font-size:var(--t-fs-14);font-weight:500;color:var(--t-ink-2);white-space:nowrap}
.t-seg button[aria-pressed="true"]{background:var(--t-surface);color:var(--t-ink);font-weight:700;border-color:var(--t-line-strong)}

/* ---------------------------------------------------------------------
   8. 入力
   --------------------------------------------------------------------- */
.t-field{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--t-s-8);min-width:0}
.t-label{font-size:var(--t-fs-14);font-weight:700}
.t-label__need{margin-left:var(--t-s-4);font-size:var(--t-fs-12);font-weight:500;color:var(--t-warn)}
.t-label__opt{margin-left:var(--t-s-4);font-size:var(--t-fs-12);font-weight:500;color:var(--t-sub)}
.t-hint{font-size:var(--t-fs-13);color:var(--t-sub)}
.t-input,.t-select,.t-textarea{width:100%;min-width:0;min-height:var(--t-h-input);padding:0 var(--t-s-16);font-size:var(--t-fs-16);
  background:var(--t-surface);border:1px solid var(--t-line-input);border-radius:var(--t-r);transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
.t-textarea{padding:var(--t-s-12) var(--t-s-16);min-height:120px;line-height:1.7;resize:vertical}
.t-select{padding-right:var(--t-s-40);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646A77' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.t-input::placeholder,.t-textarea::placeholder{color:var(--t-faint)}
.t-input:hover,.t-select:hover,.t-textarea:hover{border-color:var(--t-ink-2)}
.t-input:focus,.t-select:focus,.t-textarea:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px var(--t-brand-soft)}
.t-field.is-error .t-input,.t-field.is-error .t-select,.t-field.is-error .t-textarea{border-color:var(--t-warn);box-shadow:0 0 0 3px var(--t-warn-bg)}
.t-error{display:flex;gap:var(--t-s-4);align-items:flex-start;font-size:var(--t-fs-13);color:var(--t-warn);font-weight:500}

/* 大きな選択肢（ラジオ・チェック）。社員のスマホは小さな丸ではなくこれを使う */
.t-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--t-s-8)}
.t-choices--1{grid-template-columns:1fr}
.t-choice{position:relative}
.t-choice input{position:absolute;opacity:0;pointer-events:none}
.t-choice span{display:flex;align-items:center;gap:var(--t-s-8);min-height:var(--t-h-input);padding:0 var(--t-s-16);
  background:var(--t-surface);border:1px solid var(--t-line-input);border-radius:var(--t-r);font-weight:500;cursor:pointer}
.t-choice span::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;border:1.5px solid var(--t-line-input);background:var(--t-surface)}
.t-choice input[type="checkbox"] + span::before{border-radius:4px}
.t-choice input:checked + span{border-color:var(--t-brand);background:var(--t-brand-soft);color:var(--t-brand);font-weight:700}
.t-choice input:checked + span::before{border-color:var(--t-brand);background:var(--t-brand);box-shadow:inset 0 0 0 3px var(--t-brand-soft)}
.t-choice input[type="checkbox"]:checked + span::before{box-shadow:none;background:var(--t-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.t-choice input:focus-visible + span{outline:2px solid var(--t-brand);outline-offset:2px}

/* 数を増やす・減らす */
.t-stepper{justify-self:start;display:inline-flex;align-items:center;border:1px solid var(--t-line-input);border-radius:var(--t-r);background:var(--t-surface);overflow:hidden}
.t-stepper button{width:52px;height:var(--t-h-input);display:grid;place-items:center;color:var(--t-brand)}
.t-stepper button:active{background:var(--t-brand-soft)}
.t-stepper output{min-width:64px;text-align:center;font-size:var(--t-fs-18);font-weight:700;font-variant-numeric:tabular-nums}

/* 写真を足す */
.t-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--t-s-8)}
.t-photo{aspect-ratio:1/1;border-radius:var(--t-r);background:var(--t-sunken) center/cover no-repeat;position:relative}
.t-photo__remove{position:absolute;top:0;right:0;width:44px;height:44px;display:grid;place-items:center}
.t-photo__remove::before{content:"";position:absolute;width:28px;height:28px;border-radius:50%;background:var(--t-navy);opacity:.85}
.t-photo__remove .t-ic{position:relative;width:16px;height:16px;color:var(--t-on-brand)}
.t-photo-add{aspect-ratio:1/1;border-radius:var(--t-r);border:1.5px dashed var(--t-line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--t-brand);font-size:var(--t-fs-13);font-weight:500;background:var(--t-surface)}
.t-photo-add{border-color:var(--t-line-input)}

/* ---------------------------------------------------------------------
   9. 知らせ・空のとき・読み込み中
   --------------------------------------------------------------------- */
.t-notice{display:flex;gap:var(--t-s-12);align-items:flex-start;padding:var(--t-s-16);border-radius:var(--t-r);
  background:var(--t-surface);border:1px solid var(--t-line);border-left:3px solid var(--t-brand);font-size:var(--t-fs-14)}
.t-notice .t-ic{color:var(--t-brand);margin-top:1px}
.t-notice__title{font-weight:700;font-size:var(--t-fs-14)}
.t-notice__body{color:var(--t-ink-2)}
.t-notice__action{margin-top:var(--t-s-12)}
.t-notice--warn{border-left-color:var(--t-warn);background:var(--t-warn-tint)}
.t-notice--warn .t-ic{color:var(--t-warn)}
.t-notice--done{border-left-color:var(--t-done)}
.t-notice--done .t-ic{color:var(--t-done)}

.t-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;z-index:40;
  display:flex;align-items:center;gap:var(--t-s-8);padding:var(--t-s-12) var(--t-s-20);border-radius:var(--t-r);
  background:var(--t-navy);color:var(--t-on-brand);font-size:var(--t-fs-14);font-weight:500;box-shadow:var(--t-shadow-float);
  transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.t-toast.is-shown{opacity:1;transform:translate(-50%,0)}
.t-toast .t-ic{color:var(--t-done-on-dark)}

.t-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--t-s-40) var(--t-s-24)}
.t-empty__icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--t-sunken);color:var(--t-sub);margin-bottom:var(--t-s-16)}
.t-empty__title{font-weight:700}
.t-empty__body{font-size:var(--t-fs-14);color:var(--t-sub);margin-top:var(--t-s-4)}
.t-empty .t-btn{margin-top:var(--t-s-20)}

.t-skel{display:block;border-radius:6px;background:linear-gradient(90deg,var(--t-sunken) 0%,var(--t-bg) 50%,var(--t-sunken) 100%);  /* 読み込み中の帯だけは、動きを見せるためにグラデーションを使う（決まり 11章の例外） */
  
  background-size:200% 100%;animation:t-shimmer 1.4s ease-in-out infinite}
.t-skel--line{height:14px}
.t-skel--title{height:18px;width:60%}
.t-spinner{width:20px;height:20px;border-radius:50%;border:2px solid var(--t-line);border-top-color:var(--t-brand);animation:t-spin .8s linear infinite}
.t-loading{display:flex;align-items:center;gap:var(--t-s-12);color:var(--t-sub);font-size:var(--t-fs-14)}

@keyframes t-spin{to{transform:rotate(360deg)}}
@keyframes t-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ---------------------------------------------------------------------
   10. 種類の点・頭文字の四角・まとまりの見出し（手本：難波さんの PM Hub）
   --------------------------------------------------------------------- */
.t-cat--kaitai{--c:var(--t-cat-kaitai);--cbg:var(--t-cat-kaitai-bg)}
.t-cat--zousei{--c:var(--t-cat-zousei);--cbg:var(--t-cat-zousei-bg)}
.t-cat--gaikou{--c:var(--t-cat-gaikou);--cbg:var(--t-cat-gaikou-bg)}
.t-cat--other{--c:var(--t-cat-other);--cbg:var(--t-cat-other-bg)}
/* 種類の札：小さな点＋言葉（例 ● 解体） */
.t-chip{display:inline-flex;align-items:center;gap:var(--t-s-4);height:24px;padding:0 var(--t-s-8);border-radius:var(--t-r-sm);
  background:var(--t-sunken);color:var(--t-ink-2);font-size:var(--t-fs-12);font-weight:500;white-space:nowrap;flex:none}
.t-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--t-sub))}
/* 頭文字の四角（一覧の左。種類の色のうすい地に、種類の色の字） */
.t-mono{width:40px;height:40px;border-radius:var(--t-r);flex:none;display:grid;place-items:center;
  background:var(--cbg,var(--t-sunken));color:var(--c,var(--t-ink-2));font-size:var(--t-fs-16);font-weight:700}
/* まとまりの見出し（今日／明日 10/23（金） など。右へ細い線） */
.t-group{display:flex;align-items:center;gap:var(--t-s-12);margin:var(--t-s-16) 0 var(--t-s-4);font-size:var(--t-fs-13);color:var(--t-sub);font-weight:500}
.t-group::after{content:"";flex:1;height:1px;background:var(--t-line)}
.t-group + .t-list__item,.t-group + li{border-top:0}
.t-card--flush .t-group{padding:0 var(--t-s-20)}
@media (min-width:960px){ .t-card--flush .t-group{padding:0 var(--t-s-24)} }

/* ---------------------------------------------------------------------
   11. AI とのやりとり（手本：難波さんの PM Hub）
   AI の返事は左に金の線（AI の印。1画面の金の数に入れない）。自分の言葉は右寄せの灰色。
   AI は下書きまで。送る・確定は人のボタン。
   --------------------------------------------------------------------- */
.t-chat{display:grid;gap:var(--t-s-16)}
.t-msg{max-width:88%;font-size:var(--t-fs-14);line-height:1.8}
.t-msg--me{justify-self:end;background:var(--t-sunken);border-radius:var(--t-r);padding:var(--t-s-12) var(--t-s-16)}
.t-msg--ai{justify-self:start;background:var(--t-surface);border:1px solid var(--t-line);border-left:3px solid var(--t-gold);
  border-radius:var(--t-r);padding:var(--t-s-16) var(--t-s-20)}
.t-msg--ai ul{list-style:disc;padding-left:1.4em;margin-top:var(--t-s-8)}
.t-msg__meta{display:flex;gap:var(--t-s-12);margin-top:var(--t-s-4);font-size:var(--t-fs-12);color:var(--t-sub)}
/* AI がいま何をしているか（小さく1行） */
.t-working{display:flex;align-items:center;gap:var(--t-s-8);font-size:var(--t-fs-13);color:var(--t-sub)}
.t-working .t-spinner{width:14px;height:14px}

/* 区切り線 */
.t-divider{height:1px;background:var(--t-line);border:0;margin:var(--t-s-16) 0}
.t-gold-rule{display:block;width:28px;height:2px;background:var(--t-gold)}