/* 注文の詳しいページの CSS。
   土台の部品（進み具合 .stages/.stage/.now-card・2列 .cols・右の柱 .sheet/.blk/.kv/.pairs/.its など）は
   /style.css の「v2.0 の部品」を使う。ここには、詳しいページだけで要るものを足す。
   色・角・線は style.css のトークン（var(--ink) など）を使い、値を直書きしない。
   詳しいページ用の名前は dt- を頭に付ける（public/js/views/order-detail.js が使う）。 */

/* ---- 見出しまわり ---------------------------------------------------- */
.dt-archived{font-size:13px; color:var(--ink-3);}
.dt-skipnote{margin:-2px 0 12px;}
/* 右の柱の見出しの右端の「内容を直す」 */
.sec .btn{margin-left:auto;}
/* 本文の下の段（記録と連絡メモ）。上の段との間をあける */
.dt-low{margin-top:34px;}

/* ---- いまの段のカード ------------------------------------------------- */
.now-card .labrow{display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px;}
.now-card .dt-since{margin-top:2px;}
.now-card .callout{margin-top:14px;}
.now-card .callout .btn{flex:none;}

/* 手順の一覧（①作る ②送る ③日付を記録） */
.sub-steps{margin-top:14px; border-top:1px solid var(--line);}
.sub-steps > li{
  display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px;
}
.sub-steps > li > .m{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; line-height:1; margin-top:2px;
  border:2px solid var(--field-line); color:var(--ink-3);
}
.sub-steps > .ok > .m{background:var(--ink-3); border-color:var(--ink-3); color:var(--surface);}
.sub-steps > .cur > .m{background:var(--ink); border-color:var(--ink); color:var(--ground);}
.sub-steps > .off{color:var(--ink-3);}
.sub-steps .act{margin-top:8px;}
.sub-steps .dt-doclinks{margin-top:4px;}

/* 帳票・PDFへのリンクの小さな行 */
.dt-doclinks{display:flex; flex-wrap:wrap; gap:4px 20px; font-size:13.5px;}
.dt-docs{margin-top:14px;}
.dt-docrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;
  padding:8px 0; border-top:1px solid var(--line); font-size:14px;
}
.dt-docrow:first-child{border-top:0;}
.dt-docrow .k{font-weight:700;}
.dt-docrow .v{color:var(--ink-2); font-variant-numeric:tabular-nums;}
.dt-docs > .mute{margin-bottom:2px;}

/* メール文（コピーのボタンと、確かめるための本文） */
.mailbox{margin-top:8px;}
.dt-btnrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.mailview{margin-top:10px;}
.mailview > summary{display:inline-block; cursor:pointer; list-style:none;}
.mailview > summary::-webkit-details-marker{display:none;}
.mailtext{margin-top:10px;}
.mailtext dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 12px; font-size:14px; margin-bottom:8px;}
.mailtext dt{color:var(--ink-3); font-size:13px;}
.mailtext dd{overflow-wrap:anywhere;}
.dt-area{
  display:block; width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--field-line); border-radius:var(--r);
  padding:10px 12px; font-size:14px; line-height:1.8; resize:vertical;
}
@media (max-width:640px){ .dt-area{font-size:16px;} }
.dt-costask{margin-top:10px;}
.dt-mailpane{flex-basis:100%;}

/* ---- 済んだ段の「くわしく」 -------------------------------------------- */
.stage-more .pairs{flex-basis:100%;}
.stage-more .dt-docs{flex-basis:100%; margin-top:4px;}
.stage-more .dt-doclinks{flex-basis:100%;}
.stage-more .callout{flex-basis:100%; margin-top:6px;}
.dt-fix{flex-basis:100%; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;}
.dt-recs{margin-top:2px;}
.dt-recs li{padding:2px 0;}
.dt-recs .k{color:var(--ink-3);}
/* 追跡の操作（tracking.js が組む）。「くわしく」の中でも本文の端にそろえる */
.stage-more .fldrow{margin-top:0;}

/* ---- 入力欄（日付・メモ・理由） --------------------------------------- */
.dt-input{
  height:40px; padding:0 12px; border:1.5px solid var(--field-line); border-radius:var(--r);
  background:var(--surface); color:var(--ink); font-size:15px; min-width:0;
}
@media (max-width:640px){ .dt-input{font-size:16px;} }

/* ---- 右の柱 ------------------------------------------------------------ */
.sheet .blk p + p{margin-top:2px;}
.sheet .blk .mute{margin-top:6px;}
.sheet .blk .big + .mute{margin-top:2px;}
.sheet .blk .pairs{margin-top:10px;}
.dt-pairs{margin-top:10px;}
.dt-wrap{overflow-wrap:anywhere;}
.dt-shipto{overflow-wrap:anywhere;}
.dt-custlink{margin-top:10px;}
.sheet .blk h3 + .kv{margin-top:0;}
.its b{font-weight:700;}

/* ---- 記録・連絡メモ ---------------------------------------------------- */
.dt-rec li{grid-template-columns:7.6em minmax(0,1fr) auto;}
.dt-rec .dt-body{white-space:pre-wrap; overflow-wrap:anywhere;}
.dt-more{margin-top:8px;}
.dt-memoform{margin-top:16px;}
.dt-memoform label{display:block; font-size:13px; color:var(--ink-3); margin-bottom:4px;}
.dt-memorow{display:flex; flex-wrap:wrap; gap:8px;}
.dt-memo-input{flex:1 1 200px;}
@media (max-width:560px){
  .dt-rec li{grid-template-columns:minmax(0,1fr) auto;}
  .dt-rec .d{grid-column:1 / -1;}
}

/* ---- 下：流れた・削除 -------------------------------------------------- */
.dt-foot{align-items:flex-start;}
.dt-drop{display:flex; flex-direction:column; align-items:flex-start; gap:12px;}
.dt-dropform{max-width:560px; display:grid; gap:10px;}
.dt-dropform .hint2{margin-top:0;}
.dt-freefld label{display:block; font-size:13px; color:var(--ink-3); margin-bottom:4px;}
.dt-freefld .dt-input{width:100%; max-width:360px;}

/* 「くわしく」「いまの段」の中の開閉（.stage details の矢印・高さの指定が、入れ子の details にも当たるので打ち消す） */
.stage .mailview > summary{display:inline-flex; align-items:center; min-height:32px; gap:0;}
.stage .mailview > summary::after{margin-left:8px;}

/* hidden を付けた要素は、ここで display を指定していても必ず隠す */
.screen [hidden]{display:none !important;}
/* 追跡の操作（tracking.js が組む .mini）は、文字を枠の中央に */
.stage .mini{display:inline-flex !important; align-items:center;}

/* ---- 原価をこの場で入れる／待ちの手順／流れた見積 ------------------------ */
.dt-costcall .act{margin-top:0; flex-basis:100%;}
.dt-costlate{flex-basis:100%; margin-top:6px;}
.dt-costlate .act{margin-top:10px;}
.sub-steps .dt-costform{margin-top:10px;}
.dt-waitnote{margin-top:10px;}
.dt-docfold{margin-top:10px;}
.dt-docfold > summary{display:inline-block; cursor:pointer; list-style:none;}
.dt-docfold > summary::-webkit-details-marker{display:none;}
.dt-docfold .dt-docrow{margin-top:6px;}
.now-card .dt-drop{margin-top:16px;}
.dt-selfld label{display:block; font-size:13px; color:var(--ink-3); margin-bottom:4px;}