/* ホーム「今日やること」と注文一覧（views/dashboard.js・views/orders.js・js/task-row.js）の画面ごとのCSS。
   部品（.head .sec .block .tasks .task .pill .btn .callout .rec .sys .lnk .tools .segs .searchbox）は style.css のものをそのまま使う。
   ここに書くのは、この2画面でしか要らないものだけ。色は意味で固定（黄＝急ぐ・赤＝期限切れ・青＝新しい・緑＝済み・灰＝ほか）。
   値は style.css のトークンを引く（色の直書きをしない）。 */

/* ---------------------------------------------------------------- ホーム */

/* やることの文。名前（太字のリンク）のあとに、ふつうの太さで続ける */
.task .what{font-weight:500;}
.tasks.quiet .what{font-weight:400;}
/* 丸い印は文の最後に並ぶ。折り返しても行頭にぶら下がらないよう、印そのものは折り返さない（.pill が nowrap） */
.task .t .pill{margin-left:2px;}

/* バックアップが止まっているときだけ出る赤い一文。見出しと「やること」の間にあく */
.home-alert{margin-top:0; margin-bottom:26px;}
.home-alert-fix{flex-basis:100%; font-size:13.5px;}
/* 工房・店舗から届いた行（「新」）。文字の端はそのまま、地の色だけを本文の外へ少し広げる */
.task.is-new{background:var(--hover); margin:0 -12px; padding-left:12px; padding-right:12px;}

/* 空のときの一文（ホーム・一覧）。表や行を出さず、この一文だけ */
.home-empty{font-size:16px; color:var(--ink-2); padding:22px 0; border-top:1.5px solid var(--ink); border-bottom:1px solid var(--line); margin-bottom:34px;}
.home-empty .btn{margin-left:8px; vertical-align:middle;}

/* 最近あったこと。名前は太字のリンク。日付の列は .rec が持つ */
.rec a b{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;}
.rec .w{white-space:nowrap;}

/* 画面の最後の静かな行（バックアップ・今月の売上・SOLIWOODへの支払）。.sys は style.css */
.home-sys{margin-top:-6px;}
.home-sys .sys{margin-top:0; line-height:1.9;}
.home-sys .sys + .sys{margin-top:2px;}

/* ---------------------------------------------------------------- 確認の小窓（その場で記録する） */
dialog.ask{
  margin:auto; width:min(440px, calc(100vw - 32px)); padding:22px 24px 20px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg);
}
dialog.ask::backdrop{background:rgba(33,31,27,.46);}
dialog.ask h2{font-size:17px; font-weight:700; line-height:1.5; word-break:auto-phrase;}
dialog.ask .ask-lead{margin-top:6px; color:var(--ink-2); font-size:14px;}
dialog.ask .act{margin-top:16px;}
.ask-err{margin-top:12px; font-size:14px; font-weight:700; color:var(--danger);}
.ask-acts{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:22px;}
@media (max-width:480px){ .ask-acts .btn{flex:1 1 100%;} .ask-acts{flex-direction:column-reverse;} }

/* ---------------------------------------------------------------- 注文一覧 */

/* 絞りの丸い印と検索。丸い印は左、検索は右。狭い幅では検索が下に回る */
.orders .tools{justify-content:space-between; row-gap:12px;}
.orders .tools .searchbox{flex:0 1 300px; margin-left:auto;}
@media (max-width:640px){ .orders .tools .searchbox{flex:1 1 100%; max-width:none; margin-left:0;} }

/* 表。上に太め・下に細い線、左右は本文の端（.tasks と同じ）。4列: お客様・いま・金額・ボタン */
.otable-wrap{border-top:1.5px solid var(--ink); border-bottom:1px solid var(--line);}
.ohead{display:none;}
.orow{
  display:grid; gap:10px 20px; align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"who amt" "now now" "act act";
  padding:16px 0; border-top:1px solid var(--line);
}
.orow[hidden]{display:none;}
.otable li:first-child{border-top:0;}
.o-who{grid-area:who; min-width:0;}
.o-now{grid-area:now; min-width:0;}
.amt{grid-area:amt; font-family:var(--num); font-size:15px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
.o-act{grid-area:act;}
.o-act .btn{width:100%;}
@media (min-width:760px){
  .orow,.ohead{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) 104px 184px;
    grid-template-areas:"who now amt act";
    column-gap:20px;
  }
  .ohead{
    display:grid; align-items:end; padding:9px 0 8px; border-bottom:1px solid var(--line);
    font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--ink-2);
  }
  .ohead .r{text-align:right;}
}
/* 行のどこを押しても開く。指の形は行に置く（リンク・ボタンは自分の形のまま） */
.orow{cursor:pointer;}
.orow:hover{background:var(--hover);}
.orow a,.orow button,.orow .btn{cursor:pointer;}

.orow .nm{font-size:16px; font-weight:700; line-height:1.5; word-break:auto-phrase;}
.orow .nm a b{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;}
.orow .ds{font-size:13.5px; color:var(--ink-2); line-height:1.6; word-break:auto-phrase;}
.now-t{font-size:14.5px; line-height:1.6; word-break:auto-phrase;}
.orow.w .now-t{color:var(--ink-2);}
.orow.w .now-t b{color:var(--ink); font-weight:600;}
.orow.f .now-t{color:var(--ink-3);}
.orow.f .nm,.orow.f .amt{color:var(--ink-2);}

/* 進み具合の点。済み＝灰の塗り・いま＝黒の塗り（待ちは輪郭だけの黒）・先＝輪郭だけ。色の意味は使わない */
.dots{display:flex; align-items:center; gap:8px; margin-top:6px;}
.dots-n{font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; line-height:1;}
.dots-i{display:flex; gap:5px; align-items:center; height:12px;}
.dots-i i{width:10px; height:10px; border-radius:50%; border:2px solid var(--field-line); background:transparent;}
.dots-i i.d{background:var(--ink-3); border-color:var(--ink-3);}
.dots-i i.c{background:var(--ink); border-color:var(--ink); box-shadow:0 0 0 3px var(--neutral-w);}
.orow.w .dots-i i.c{background:var(--surface); border-color:var(--ink); box-shadow:none;}

/* 狭い幅では、最近あったこと の「誰が」を文の下に回す（文の幅を残す） */
@media (max-width:560px){
  .rec li{grid-template-columns:3.4em minmax(0,1fr);}
  .rec .w{grid-column:2; font-size:13px;}
}