/* PC（ViewSonic TD1655）へ常時表示するときだけの見た目。
 *
 * ════════════════════════════════════════════════════════════════
 * 【このファイルの約束】
 *   ① 見た目の指定は**すべて @media (pointer: fine) の中**に書く。
 *      iPad（指＝pointer: coarse）では1行も効かない。
 *      メディアクエリの外に置いてよいのは「PC専用の要素を隠す」指定だけ。
 *   ② 生の色・生のpx値を書かない。値は ortho-tokens.css の --pc-* を使う。
 *      （scripts/check-ui.mjs がこのファイルも検査する）
 *   ③ style.css・ortho.css より**後に読ませる**（index.html）。
 *      詳細度で殴らず、読み込み順で上書きする。
 * ════════════════════════════════════════════════════════════════
 *
 * 【何のためか】
 * 15.6型のタッチモニタをドクタールームに置き、矯正の患者一覧を一日中映す。
 * iPad を手に取って起動する一手間を無くすための画面で、
 * 「上から下へ流して見る → 色のついた枠だけが目に入る → その場で工程を押す」
 * ことだけができればよい。
 *
 * 【もとになったデザイン】
 * 2026-09-22 確定・統一デザイン案 v8
 * https://claude.ai/artifact/Qamsk1pFYVdkQXrWzsBDDF
 * 設計と v8 からの差は
 * ~/DentalAI/system/技術メモ/2026-09-22_TD1655常時表示/PC_DISPLAY_CSS_PLAN.md
 *
 * 【1920pxを959pxずつに分けて使う】
 * 左＝矯正、右＝インプラント。**全画面（1920px）にしないこと。**
 * 1248px以上＋マウスだと usesTableLayout が受付PC向けの一覧表へ切り替わり、
 * 枠を押して工程を進める形ではなくなる。
 *
 * 【なぜ shared-manifest.mjs に登録しないか】
 * tests/shared.test.js「矯正が所有するのは4領域に限る」が許す断片に
 * css/ortho.css しか無く、登録するとそのテストが落ちる。
 * ortho-tokens.css・overview.js も同じ理由で未登録のまま運用している。
 */

/* ══════════════════════════════════════════════════════════════
   メディアクエリの外（iPadでも読まれる）

   PC専用としてDOMへ入れた要素を隠すだけ。ここに見た目を書かない。
   overview.js が足す2つで、CSSだけでは文字を作り出せないもの。
   display:none なので読み上げにも出ない＝iPadでは存在しないのと同じ。
   ══════════════════════════════════════════════════════════════ */

.patient-row__due,
.patient-row__next {
  display: none;
}

@media (pointer: fine) {
  /* ────────────────────────────────────────────────────────────
     1. 地と文字
     ──────────────────────────────────────────────────────────── */

  body {
    background: var(--ortho-canvas);
    color: var(--pc-ink);
  }

  /* ────────────────────────────────────────────────────────────
     2. 左のサイドバーを、上の帯（2段）にする

     nav.js は触らない。項目は href で選び分ける。
     1段目（濃紺・44px＋余白＝60px）… ORTHOTRACK／症例登録／今日確認すること／
                                       患者一覧／スケジュール
     2段目（白・46px）              … 症例区分7個／設定
     ──────────────────────────────────────────────────────────── */

  .ortho-shell {
    flex-direction: column;
  }

  .app-nav {
    /* 縦サイドバー（ortho.css）と横タブ（style.css）の指定を両方とも解く */
    width: 100%;
    max-width: none;
    margin-inline: 0;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    /* 行間は0にする。行間を空けると2段目の開始位置がずれ、
       下の段付きグラデーションと境目が合わなくなる。 */
    gap: 0 var(--space-2);
    padding-inline: var(--space-4);
    overflow-y: visible;
    /* 1要素で「上＝このアプリの色／下＝白」を作る。切り替わる位置は1段目の高さ。
       **上の色は左右で変える**（矯正＝インクブルー／インプラント＝テラコッタ）。
       離れて見たとき、どちらのアプリかを色だけで見分けるため（v8の確定事項）。 */
    background: linear-gradient(
      to bottom,
      var(--pc-accent) 0,
      var(--pc-accent) var(--pc-bar-h),
      var(--color-surface) var(--pc-bar-h)
    );
    border-bottom: 1px solid var(--ortho-card-border);
  }

  /* 1段目の高さを決めるのはこれ。ここが --pc-bar-h でなくなると
     グラデーションの境目と2段目の境界がずれる。 */
  .ortho-nav__brand {
    min-height: var(--pc-bar-h);
    align-items: center;
    padding: 0;
    margin-inline-end: var(--space-2);
  }

  /* 見出し「今日」は出さない（帯には収まらない）。
     div の子要素は ORTHOTRACK・今日・症例区分 の3つだけなので、
     :last-of-type は必ず「症例区分」になる（並びは SPEC §6 が固定）。 */
  .ortho-nav__label:not(:last-of-type) {
    display: none;
  }

  /* 見出し「症例区分」を高さ0の全幅にして、**ここで2段目へ折り返させる。**
     文字は見せないが、要素として残すことで折り返す位置が確定する。 */
  .ortho-nav__label:last-of-type {
    flex: 0 0 100%;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    visibility: hidden;
  }

  /* --- 帯の中の項目（共通） --- */
  .app-nav__item {
    flex: 0 0 auto;
    align-self: center;
    min-height: var(--pc-round);
    gap: var(--space-2);
    padding-inline: var(--space-3);
    border-inline-start: none;
    border-radius: var(--radius-pill);
    font-size: var(--pc-fs-step);
    font-weight: var(--fw-medium);
    color: var(--pc-bar-ink);
    white-space: nowrap;
  }

  .app-nav__item[aria-current="page"] {
    background: var(--pc-bar-strong);
    border-inline-start-color: transparent;
  }

  /* 症例登録。唯一の「新しく作る」操作なので、1段目で塗って目立たせる。 */
  .app-nav__item[href="/register"] {
    margin: 0;
    background: var(--pc-bar-strong);
    color: var(--color-ink-inverse);
  }

  /* 今日確認すること。v8 の「白い錠剤」。常に白で、押す場所だと分かるようにする。 */
  .app-nav__item[href="/?tab=dashboard"] {
    background: var(--color-surface);
    color: var(--pc-accent);
    font-weight: var(--fw-bold);
  }

  /* --- 2段目（白い帯）の症例区分チップと設定 ---
     アイコンは外す。8個ぶんのアイコンで約220px使い、959pxでは入りきらない
     （実測見込み）。意味は文字が持っているため、外しても読めなくならない。 */
  .app-nav__item[href="/?tab=explain"],
  .app-nav__item[href="/?tab=aligner"],
  .app-nav__item[href="/?tab=wire"],
  .app-nav__item[href="/?tab=hold"],
  .app-nav__item[href="/?tab=refinement"],
  .app-nav__item[href="/?tab=retention"],
  .app-nav__item[href="/?tab=paused"],
  .app-nav__item[href="/settings"] {
    min-height: var(--pc-chipbar-h);
    margin: 0;
    padding-inline: var(--space-3);
    border-top: none;
    border-radius: var(--radius-sm);
    background: none;
    font-size: var(--pc-fs-meta);
    color: var(--color-ink);
  }

  .app-nav__item[href="/?tab=explain"] .icon,
  .app-nav__item[href="/?tab=aligner"] .icon,
  .app-nav__item[href="/?tab=wire"] .icon,
  .app-nav__item[href="/?tab=hold"] .icon,
  .app-nav__item[href="/?tab=refinement"] .icon,
  .app-nav__item[href="/?tab=retention"] .icon,
  .app-nav__item[href="/?tab=paused"] .icon,
  .app-nav__item[href="/settings"] .icon {
    display: none;
  }

  .app-nav__item[href="/?tab=explain"][aria-current="page"],
  .app-nav__item[href="/?tab=aligner"][aria-current="page"],
  .app-nav__item[href="/?tab=wire"][aria-current="page"],
  .app-nav__item[href="/?tab=hold"][aria-current="page"],
  .app-nav__item[href="/?tab=refinement"][aria-current="page"],
  .app-nav__item[href="/?tab=retention"][aria-current="page"],
  .app-nav__item[href="/?tab=paused"][aria-current="page"],
  .app-nav__item[href="/settings"][aria-current="page"] {
    background: var(--pc-accent);
    color: var(--color-ink-inverse);
    font-weight: var(--fw-bold);
  }

  /* 設定は毎日押すものではない。2段目の右端へ離して置く。 */
  .app-nav__item[href="/settings"] {
    margin-inline-start: auto;
  }

  /* ────────────────────────────────────────────────────────────
     3. 通知の表示を、1段目の右端へ移す

     .app-header は .ortho-shell__main の中にあるが、position: fixed で
     ウィンドウ基準に置くため、どちらがスクロールしても動かない。
     （片側959pxの独立したウィンドウで開くため、right はその窓の右端になる）
     ──────────────────────────────────────────────────────────── */

  .app-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: var(--space-4);
    z-index: 30;
    height: var(--pc-bar-h);
    align-items: center;
    padding: 0;
    background: none;
    border-bottom: none;
  }

  .app-header__meta {
    padding-inline-end: 0;
  }

  .notify-chip {
    background: var(--pc-bar-strong);
    border-color: var(--pc-bar-strong);
    color: var(--pc-bar-ink);
    font-size: var(--pc-fs-meta);
  }

  /* ────────────────────────────────────────────────────────────
     4. 本文。画面名とフッターを外し、その高さを症例カードへ回す
     ──────────────────────────────────────────────────────────── */

  .ortho-shell__main {
    overflow-y: auto;
  }

  .page {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    padding: var(--space-3) var(--space-4) var(--space-5);
  }

  /* 画面名。一日中映す画面では、説明文まで読むことはない。
     見出しは残す（症例登録・設定では唯一の画面名になるため）が、
     1行ぶんまで削って、空いた高さを症例カードへ回す。 */
  .page-head {
    margin-block-end: var(--space-2);
  }

  .page-head__title {
    font-size: var(--fs-section);
  }

  .page-head__lead {
    display: none;
  }

  /* フッター（アプリ名・Version）。Version は設定画面で見られる。 */
  .app-footer {
    display: none;
  }

  /* 担当Dr・担当DAの絞り込み。46pxの静かな帯として残す（助手が使う）。 */
  .filter-bar {
    gap: var(--space-3);
    margin-block-end: var(--space-3);
  }

  .assignee-filter,
  .assignee-filter__label {
    font-size: var(--pc-fs-meta);
  }

  .assignee-filter__select {
    /* タッチで押すため44pxは下回らない */
    min-height: var(--pc-chipbar-h);
    font-size: var(--pc-fs-meta);
  }

  .patients__total {
    margin-block-end: var(--space-2);
    font-size: var(--pc-fs-meta);
    color: var(--pc-ink-muted);
    text-align: end;
  }

  /* ────────────────────────────────────────────────────────────
     5. 患者カード

     1人ぶんを3段にする。目に入る順番が、確認する順番になるようにする。
       ① 患者IDと症例区分、右端に期限
       ② 次にすること（この画面で一番大きい文字）
       ③ 工程レール
     ──────────────────────────────────────────────────────────── */

  .patients {
    gap: var(--space-3);
  }

  .patient-row-wrap {
    gap: var(--space-2);
  }

  /* 枠線ではなく**枠の中を塗る**（利用者の指示）。
     左の太帯はタブのテーマ色をやめ、期限の切迫度に譲る。
     上から流したとき、色のついた枠だけが目に入る状態にするため。 */
  .patient-row {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: none;
    border-inline-start: var(--pc-band-w) solid var(--pc-card-todo-band);
    border-radius: var(--pc-card-radius);
    background: var(--color-surface);
    box-shadow: 0 0 0 1px var(--pc-card-todo-edge), var(--shadow-md);
  }

  /* 期限が近い。 */
  .patient-row--warn {
    border-inline-start-color: var(--pc-rail-warn);
    background: var(--pc-card-warn-bg);
    box-shadow: 0 0 0 1px var(--pc-card-warn-edge), var(--shadow-md);
  }

  /* 遅れ。**赤が出ている症例は必ず医院側が動けば解消する**
     （CLAUDE.md「赤は医院側の遅れだけに使う」）。
     業者の到着待ちで期限を過ぎているものは warn のまま黄で出る。 */
  .patient-row--alert {
    border-inline-start-color: var(--pc-rail-alert);
    background: var(--pc-card-alert-bg);
    box-shadow: 0 0 0 1px var(--pc-card-alert-edge), var(--shadow-md);
  }

  .patient-row__open {
    gap: var(--space-1);
  }

  /* ① 患者IDの段 */
  .patient-row__head {
    order: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-3);
  }

  .patient-row__id {
    font-family: var(--font-family-num);
    font-size: var(--pc-fs-id);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--pc-ink);
    font-variant-numeric: tabular-nums;
  }

  .patient-row__tab,
  .patient-row__type {
    font-size: var(--pc-fs-step);
    font-weight: var(--fw-medium);
    color: var(--pc-ink-muted);
  }

  /* 期限。overview.js が足す（CSSでは文字を作れない）。 */
  .patient-row__due {
    display: inline-flex;
    align-items: center;
    margin-inline-start: auto;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--pc-fs-due);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* 順調。主張させない。 */
  .patient-row__due--todo {
    background: var(--pc-accent-soft);
    color: var(--pc-accent);
    font-weight: var(--fw-medium);
  }

  /* 期限が近い・遅れ。塗って白抜きにする（v8 の「反転」）。 */
  .patient-row__due--warn {
    background: var(--pc-warn-fill);
    color: var(--color-ink-inverse);
  }

  .patient-row__due--alert {
    background: var(--pc-rail-alert);
    color: var(--color-ink-inverse);
  }

  /* ② 次にすること。この画面で一番大きい文字にする。 */
  .patient-row__next {
    display: block;
    order: 1;
    font-size: var(--pc-fs-next);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--pc-ink);
  }

  /* 担当Dr・担当DA・登録日。 */
  .patient-row__body {
    order: 2;
    gap: var(--space-1) var(--space-3);
    font-size: var(--pc-fs-meta);
  }

  /* 現在の工程名は②と重なる（「発注待ち」と「発注を記録してください」）。
     ②のほうが何をすればよいか分かるため、こちらは出さない。 */
  .patient-row__phase {
    display: none;
  }

  .patient-row__meta {
    color: var(--pc-ink-muted);
  }

  /* 編集ボタン。押す場所だが主役ではない。 */
  .patient-row-wrap .btn {
    align-self: center;
    font-size: var(--pc-fs-meta);
  }

  /* ────────────────────────────────────────────────────────────
     6. 工程レール（③）

     iPad は「箱が7つ」。PCでは箱をやめ、細い棒＋工程名＋日付にする。
     ui.js が作るDOM（.step / .step__name / .step__sub / .step__state）は
     そのまま使い、CSSだけで描き直す。tone の判定も既存のクラスを読む。

       棒の色  緑＝終わった／赤＝遅れ／黄土＝期限が近い／薄いグレー＝まだ
               いまやる工程だけ、このアプリの色（青）
     ──────────────────────────────────────────────────────────── */

  .patient-row__steps {
    margin-block-start: var(--space-1);
  }

  /* 折り返さない。「どこまで終わったか」を左から右へ一度に読むための並びで、
     2段になると読めなくなる（iPad実機での指摘と同じ理由）。
     **列数を数えず、工程の数だけ列を作る。**
     患者一覧は caseCard.js の withStepCount() を通さないため --step-count が
     無く、repeat(var(--step-count, 7)) だと7列に固定されてしまう。
     リファイメント（8工程）だけが2段に折り返していた（実測で発見）。
     grid-auto-flow: column なら、何工程でも必ず1段に並ぶ。 */
  .steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  /* 箱をやめる。ortho.css・style.css が状態ごとに付けている
     余白・枠・角丸・背景を、同じ詳細度の後出しで全部解く。 */
  .step,
  .step:not(.is-current),
  .step:not(.is-current):hover,
  .step--todo,
  .step--done,
  .step--warn,
  .step--alert,
  .step.is-current,
  .step--warn.is-current,
  .step--alert.is-current,
  .step--done:not(.is-current),
  .step:not(.is-current):not(.step--done):not(.step--warn):not(.step--alert) {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
  }

  /* 棒 ／ 工程名（2行まで） ／ 日付と状態（1行に2つ並べる）。
     高さをそろえて、7つの棒が一直線に並ぶようにする。
     .step 自体の高さで44pxを超えるため、棒が9pxでも指で押せる。 */
  .step {
    /* 2列目を 1fr にして、列の幅を必ず使い切る。
       auto auto のままだと列が中身の幅で止まり、棒（grid-column: 1 / -1）も
       工程名も中身のぶんしか広がらない。棒の長さが工程名の文字数で
       変わってしまい、7本が不揃いに見えた（実測して気づいた）。 */
    grid-template-columns: auto 1fr;
    /* 工程名は2行を前提にする。2.4em だと「E-line Smile登録」が
       1pxだけ切れた（実測）。丸めの誤差ぶん余らせる。 */
    grid-template-rows: var(--pc-rail-h) 2.6em auto;
    justify-items: start;
    gap: var(--space-1);
    text-align: start;
  }

  /* 点（丸）を、棒に描き替える。 */
  .step::before {
    grid-column: 1 / -1;
    grid-row: 1;
    /* .step の justify-items: start を打ち消して、列いっぱいに伸ばす */
    justify-self: stretch;
    width: auto;
    height: var(--pc-rail-h);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--pc-rail-todo);
    align-self: start;
  }

  .step--done::before {
    background: var(--pc-rail-done);
  }

  .step--warn::before {
    background: var(--pc-rail-warn);
  }

  .step--alert::before {
    background: var(--pc-rail-alert);
  }

  /* いまやる工程。このアプリの色で示す。
     ただし遅れ・期限が近いはその色を残す（赤い工程が青く見えると
     遅れに気づけない。ortho.css と同じ考え方）。 */
  .step.is-current::before {
    width: auto;
    height: var(--pc-rail-h);
    border: none;
    background: var(--pc-accent);
  }

  .step--warn.is-current::before {
    background: var(--pc-rail-warn);
  }

  .step--alert.is-current::before {
    background: var(--pc-rail-alert);
  }

  .step__name {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: var(--pc-fs-step);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    color: var(--pc-ink-muted);
  }

  .step__sub {
    grid-column: 1;
    grid-row: 3;
    font-size: var(--pc-fs-sub);
    color: var(--pc-ink-muted);
  }

  .step__state {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    font-size: var(--pc-fs-sub);
    color: var(--pc-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 終わった工程は、棒の緑だけで示して文字は静かにする。 */
  .step--done .step__name,
  .step--done .step__sub,
  .step--done .step__state {
    color: var(--pc-ink-muted);
    font-weight: var(--fw-medium);
  }

  /* 遅れ。 */
  .step--alert .step__name,
  .step--alert .step__sub,
  .step--alert .step__state {
    color: var(--pc-rail-alert);
    font-weight: var(--fw-bold);
  }

  /* 遅れのときだけ、状態の文字を出さない。
     .step__sub が既に「2日超過」と出しており、その横に「期限超過」が並ぶと
     同じことを2回言うことになる（実測して気づいた）。
     **色だけに頼らない**という決まりは崩していない。日数の文字が残る。 */
  .step--alert .step__state {
    display: none;
  }

  /* 期限が近い。黄土の文字は白地でも塗った枠の中でも読めるよう濃くする。 */
  .step--warn .step__name,
  .step--warn .step__sub,
  .step--warn .step__state {
    color: var(--pc-warn-ink);
    font-weight: var(--fw-bold);
  }

  /* いまやる工程。 */
  .step.is-current .step__name,
  .step.is-current .step__sub,
  .step.is-current .step__state {
    color: var(--pc-accent);
    font-weight: var(--fw-bold);
  }

  .step--warn.is-current .step__name,
  .step--warn.is-current .step__sub,
  .step--warn.is-current .step__state {
    color: var(--pc-warn-ink);
  }

  .step--alert.is-current .step__name,
  .step--alert.is-current .step__sub,
  .step--alert.is-current .step__state {
    color: var(--pc-rail-alert);
  }
}