/* 新しい TIES アプリだけの並べ方。色・文字の大きさ・余白は ties.css の変数だけを使う（デザインの決まり 6章） */

.boot{min-height:60vh}
[hidden]{display:none !important}

/* 上の帯：タイトルつき */
.t-top__title{flex:1;font-weight:700;font-size:var(--t-fs-16)}
.top-spacer{flex:1}

/* ホーム */
.home-grid{display:grid;gap:var(--t-s-16)}
.home-main,.home-side{display:grid;gap:var(--t-s-16);align-content:start}
.home-main > *,.home-side > *{min-width:0}
@media (min-width:960px){ .home-grid,.home-main,.home-side{gap:var(--t-s-24)} }
@media (min-width:1200px){
  .home-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .home-side{position:sticky;top:var(--t-s-24)}
}

/* AI にひとこと（ホームとやることの上） */
.capture{display:flex;gap:var(--t-s-8);align-items:center;background:var(--t-surface);border:1px solid var(--t-line-input);border-radius:var(--t-r);padding:var(--t-s-4) var(--t-s-4) var(--t-s-4) var(--t-s-16)}
.capture:focus-within{border-color:var(--t-brand);box-shadow:0 0 0 3px var(--t-brand-soft)}
.capture input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:var(--t-fs-16);min-height:44px;color:var(--t-ink)}
.capture .t-iconbtn{flex:none}
.capture__mark{width:8px;height:8px;background:var(--t-gold);transform:rotate(45deg);flex:none}
.capture-hint{font-size:var(--t-fs-13);color:var(--t-sub);margin-top:var(--t-s-8)}
.is-listening{color:var(--t-warn) !important}

/* 今日やる3つ */
.today3 .t-list__item{align-items:flex-start}
.rank{font-family:var(--t-font-head);font-size:var(--t-fs-20);color:var(--t-brand);width:24px;flex:none;line-height:1.4}
.why{display:block;margin-top:var(--t-s-4);font-size:var(--t-fs-13);color:var(--t-ink-2)}
.pad{padding:0 var(--t-s-20) var(--t-s-12)}
@media (min-width:960px){ .pad{padding:0 var(--t-s-24) var(--t-s-12)} }

/* 一覧の行の右：札とチェック */
.row-right{display:flex;align-items:center;gap:var(--t-s-8);flex:none}
.check{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:50%}
.check::before{content:"";width:24px;height:24px;border-radius:50%;border:1.5px solid var(--t-line-input);background:var(--t-surface)}
.check:hover::before{border-color:var(--t-done)}
.check.is-done::before{background:var(--t-done);border-color:var(--t-done)}
.task-done .t-list__title{text-decoration:line-through;color:var(--t-sub)}
.due-warn{color:var(--t-warn);font-weight:500}
.due-soon{color:var(--t-wait);font-weight:500}
.new-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--t-brand);margin-right:var(--t-s-8);vertical-align:middle}

/* 一覧と詳細（パソコンは左右・スマホは別の画面） */
/* 左右に並べるのは、両方が読める幅（1200〜）だけ。それより狭いときはスマホと同じく別の画面 */
.split{display:block}
@media (min-width:1200px){
  .t-main.is-wide{max-width:none}
  .split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:var(--t-s-40);align-items:start}
  .pane-detail{position:sticky;top:0;max-height:100vh;overflow:auto;padding-bottom:var(--t-s-32)}
  .split .t-top__back{display:none}
}
@media (max-width:1199px){
  .split .t-top__back.t-only-phone{display:inline-flex !important}
  .split.show-detail .pane-list{display:none}
  .split:not(.show-detail) .pane-detail{display:none}
}
.pane-detail-empty{padding-top:var(--t-s-64)}

/* 項目と値の下の記録 */
.log{margin:0;padding:0;list-style:none;display:grid;gap:var(--t-s-8);color:var(--t-ink-2);font-size:var(--t-fs-14)}
.log time{font-variant-numeric:tabular-nums;color:var(--t-sub);margin-right:var(--t-s-8)}
.detail-actions{display:grid;gap:var(--t-s-8)}
@media (min-width:960px){ .detail-actions{display:flex;flex-wrap:wrap;gap:var(--t-s-8)} .detail-actions .t-btn{flex:1 1 160px} }

/* 下から出る画面（パソコンは右に出る） */
.sheet-back{position:fixed;inset:0;background:var(--t-navy);z-index:50;opacity:0;transition:opacity .2s;pointer-events:none}
.sheet-back.is-open{opacity:.32 !important;pointer-events:auto}
body.sheet-open{overflow:hidden}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--t-bg);border-radius:var(--t-r-lg) var(--t-r-lg) 0 0;
  max-height:92vh;overflow:auto;padding:var(--t-s-8) var(--t-gutter) calc(var(--t-s-24) + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .2s;box-shadow:var(--t-shadow-float)}
.sheet__grab{width:40px;height:4px;border-radius:2px;background:var(--t-line-strong);margin:var(--t-s-4) auto var(--t-s-16)}
.sheet.is-open{transform:none}

/* 小さな知らせは画面の幅まで・文字は折り返す（「元に戻す」がいつも押せるように） */
.t-toast{max-width:calc(100vw - 2 * var(--t-gutter));white-space:normal;flex-wrap:wrap;justify-content:center}
@media (min-width:960px){ .t-toast{bottom:var(--t-s-32)} }

/* 長い英数字（型番・URL）で横にはみ出さない */
.t-list__title,.t-list__sub,.t-notice__title,.t-notice__body,.t-h1,.t-msg,.t-kv dd,.log li,.ai-card{overflow-wrap:anywhere}
.nowrap{white-space:nowrap}

/* 押せる所は 44px（デザインの決まり 7章） */
.t-notice__action{display:inline-flex;align-items:center;min-height:44px}
.t-card__more{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--t-s-8);margin-right:calc(var(--t-s-8) * -1)}
.avatar-link{display:grid;place-items:center;width:44px;height:44px}

/* 一覧の行：右に札・済の丸・＞ */
.t-list__item .t-list__chev{flex:none}
.more{width:100%;text-align:left;background:none;border:0}
.check[disabled]{opacity:.35;cursor:not-allowed}
.rank{font-family:var(--t-font)}
@media (min-width:960px){
  .sheet{left:auto;top:0;width:520px;max-height:none;border-radius:0;padding:var(--t-s-32) var(--t-s-32);transform:translateX(100%)}
  .sheet__grab{display:none}
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--t-s-8);margin-bottom:var(--t-s-16)}
.sheet-foot{display:grid;gap:var(--t-s-8);margin-top:var(--t-s-24)}

/* 渡す相手の量 */
.load{display:flex;align-items:center;gap:var(--t-s-8);font-size:var(--t-fs-13);color:var(--t-ink-2)}
.load__bar{flex:1;height:4px;border-radius:2px;background:var(--t-sunken);overflow:hidden}
.load__bar > span{display:block;height:100%;background:var(--t-brand)}
.load__bar.is-full > span{background:var(--t-warn)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--t-s-8)}
.person{display:flex;flex-direction:column;align-items:flex-start;gap:var(--t-s-4);text-align:left;padding:var(--t-s-12);border:1px solid var(--t-line-input);border-radius:var(--t-r);background:var(--t-surface);min-height:72px}
.person[aria-pressed="true"]{border-color:var(--t-brand);background:var(--t-brand-soft)}
.person b{font-size:var(--t-fs-16)}
.person small{font-size:var(--t-fs-13);color:var(--t-ink-2)}

/* AI の窓口 */
.ask-wrap{max-width:760px}
.ask-suggest{display:flex;flex-wrap:wrap;gap:var(--t-s-8)}
.ask-suggest button{min-height:44px;padding:0 var(--t-s-16);border:1px solid var(--t-line-input);border-radius:var(--t-r);background:var(--t-surface);font-size:var(--t-fs-16);color:var(--t-ink-2)}
.ask-suggest button:hover{border-color:var(--t-brand);color:var(--t-brand)}
/* AI カードの共通の形（ui.js の aiCard） */
.ai-card{border:1px solid var(--t-line);border-left:3px solid var(--t-gold);border-radius:0 var(--t-r) var(--t-r) 0;background:var(--t-surface);padding:var(--t-s-16)}
.ai-card__body{margin-top:var(--t-s-4);color:var(--t-ink-2)}
.ai-card__actions{display:flex;flex-wrap:wrap;gap:var(--t-s-8);margin-top:var(--t-s-12)}
.ai-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--t-s-8);margin-top:var(--t-s-12)}
.why-box summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-size:var(--t-fs-14);font-weight:500;color:var(--t-brand)}
.why-box[open]{flex-basis:100%;display:grid;gap:var(--t-s-8);padding:var(--t-s-12);background:var(--t-sunken);border-radius:var(--t-r-sm)}
.why-box[open] summary{min-height:auto}
.reads{list-style:none;margin:0;padding:0;display:grid;gap:var(--t-s-4);font-size:var(--t-fs-13);color:var(--t-ink-2)}
.reads li{display:flex;align-items:center;gap:var(--t-s-4);flex-wrap:wrap}
.read-from{color:var(--t-ink)}
/* AI が入れた欄（人が直すまで金の印）＝人の値と見分ける */
.t-field.is-ai .t-label::after{content:"AI が入れた";margin-left:var(--t-s-8);font-size:var(--t-fs-12);font-weight:500;color:var(--t-ink-2);padding:0 var(--t-s-4);border:1px solid var(--t-line-input);border-radius:var(--t-r-sm)}
.t-field.is-ai .t-input,.t-field.is-ai .t-select,.t-field.is-ai .people{box-shadow:inset 3px 0 0 var(--t-gold)}

/* AI に任せている仕事・覚え帳 */
.job{display:grid;gap:var(--t-s-8)}
.job + .job{border-top:1px solid var(--t-line);padding-top:var(--t-s-16);margin-top:var(--t-s-16)}
.stage{display:flex;gap:var(--t-s-4)}
.stage span{flex:1;height:6px;border-radius:3px;background:var(--t-sunken)}
.stage span.on{background:var(--t-brand)}
.lock{display:inline-flex;align-items:center;gap:var(--t-s-4);font-size:var(--t-fs-13);color:var(--t-ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--t-s-8)}
.chips button{min-height:44px;padding:0 var(--t-s-16);border:1px solid var(--t-line-input);border-radius:var(--t-r);background:var(--t-surface);font-size:var(--t-fs-14)}
.chips button[aria-pressed="true"]{border-color:var(--t-brand);background:var(--t-brand-soft);color:var(--t-brand);font-weight:700}
.snooze{font-size:var(--t-fs-13);color:var(--t-brand);min-height:44px;padding:0 var(--t-s-8);margin-left:calc(var(--t-s-8) * -1)}

/* 部屋の入口（準備中） */
.soon{opacity:.72}
.ver{font-size:var(--t-fs-12);color:var(--t-sub)}

/* 練習用の帯（中身の列のいちばん上） */
.practice{display:flex;align-items:center;gap:var(--t-s-8);font-size:var(--t-fs-13);color:var(--t-wait);background:var(--t-wait-bg);padding:var(--t-s-8) var(--t-s-12);margin:var(--t-s-8) 0 0;border-radius:var(--t-r-sm)}

/* ログイン（パソコンでも左の並びの格子に入れない） */
.t-app.is-login{display:block}
.login{max-width:420px;margin:0 auto;padding:var(--t-s-64) var(--t-gutter);display:grid;gap:var(--t-s-24);text-align:center}
.login img{height:40px;margin:0 auto}