/* 店員の画面の見た目「ひと昔前のゲーム」（2026-09-27）。店員の画面だけが、各画面の <style> の後に読む（<body class="店員">）。
   色・見出しの黒い帯と星・頁の枠と影・下の黒い太帯・字は、お客さまの画面と同じ（昔のゲーム.css をそのまま読む）。
   昔のゲーム.css のうち、お客さまの画面の部品に合わせた所（売り場・黒い窓・札・小さな枠・ボタンの大きさと「»」）は
   :where(body:not(.店員)) でお客さまの画面だけに効く。店員の画面のボタンは下で決める。
   店員の画面に置かない物：舞台（話の窓・どんぐり・地面）と、文字を1文字ずつ出す動き（昔のゲーム.js は読まない）・枠が順に出る動き。
     店は急いで読むので、読むのを待たせる物は置かない。押した時に沈む動きは残す。
   🔴 お客さまの画面はこのファイルを読まない＝ここに何を足しても、お客さまの見た目は変わらない。
   🔴 印刷は1ミリも変えない：昔のゲーム.css もこの下の決まりも「画面の時だけ」（@import の screen と @media screen）。
      紙に効くのは、画面の側に足した帯（.昔-頭）を消す1行だけ。
   🔴 画面に出している紙の見本（.sheet：OG286 紙の伝票・OG35 宛名の印刷）にも飾りを当てない（画面の見本と刷った紙を同じにしておく）。 */
@import url("昔のゲーム.css") screen;

@media print{ .昔-頭,.昔-三本線,.昔-三本線の窓{display:none!important} }

@media screen{
/* ── 動き：枠が順に出るのを止める（読むのを待たせない） */
body.店員 :is(.panel,.card,.way,.step,.qa,.meta,.shelf,.result-card,.list > .item,.rows > .row,.昔-説明図){animation:none}

/* ── 入れる欄：枠は2px（3pxだと中の字の幅が狭くなる。表の中の小さな欄が多い）。
   選ぶ欄（select）の中の字だけは Yu Gothic を先に置く：この字（BIZ UDPゴシック）は店員の画面の元の字（Windowsでは多くが Yu Gothic）より背が低く、
   選ぶ欄は字の背で高さが決まる（行の高さを決めても効かない）ので、選ぶ欄が縦に最大8px縮んでいた（Windowsで実測。これで最大3pxまで戻る）。
   iPad などはどちらの字も入っていないので、もともと変わらない。 */
body.店員 :is(input:not([type=checkbox]):not([type=radio]),select,textarea):not(#昔){border-width:2px}
body.店員 select:not(#昔){font-family:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",sans-serif}
/* 🔴 まだ選んでいない必須の欄の赤（OG281 の担当者）は、黒い枠で消さない */
body.店員 .need :is(input,select,textarea):not(#昔){border-color:var(--red,#a53b32);background:#fff6f4}

/* ── 表：見出しの行を紙の色に、下に黒い線。中の行の色（期限の色分けなど）はそのまま */
body.店員 th:not(.sheet th){background-color:#fbe7c6;color:var(--墨)}
body.店員 thead th:not(.sheet th){border-bottom:2px solid var(--墨)}

/* ── 主なボタン（命令の窓）：黒い地に白い縁。大きさと余白は画面のまま（表の中のボタンを大きくしない） */
body.店員 :is(button.primary,.btn.primary,.btn.fill,button.go){
  background:var(--窓);color:#fff;border:3px solid #fff;border-radius:6px;box-shadow:0 0 0 3px var(--窓);
  font-family:var(--角字);font-weight:700;letter-spacing:.02em;cursor:pointer}
body.店員 :is(button.primary,.btn.primary,.btn.fill,button.go):is(:hover,:focus-visible):not(:disabled){background:var(--窓);color:var(--黄)}
body.店員 :is(button.primary,.btn.primary,.btn.fill,button.go):active:not(:disabled){color:var(--黄);transform:translateY(2px)}
/* 押せない時は薄く（濃い茶だと、押せる紙のボタンより目立って「押せる」に見えた。2026-09-28・OG20「販売できる状態にする」など5つ） */
body.店員 :is(button.primary,.btn.primary,.btn.fill,button.go):disabled{
  background:#eadbc4;border-color:#8a7a66;box-shadow:none;color:#8a7a66;opacity:1;cursor:not-allowed}

/* ── ふつうのボタン：紙の地に黒い縁と影。押すと沈む。
   🔴 赤いボタン（danger・del・tdel・warn）は入れない＝画面の赤のまま目立たせる */
body.店員 :is(.btn:not(.primary,.fill,.danger,.del,.tdel,.warn),.small-btn,button.secondary,button.sub,.refresh,.reload,.outline,.mild,.csv-button,.add-btn){
  background:var(--紙);color:var(--墨);border:2px solid var(--墨);border-radius:0;box-shadow:2px 2px 0 var(--影);font-weight:700;cursor:pointer}
body.店員 :is(.btn:not(.primary,.fill,.danger,.del,.tdel,.warn),.small-btn,button.secondary,button.sub,.refresh,.reload,.outline,.mild,.csv-button,.add-btn):is(:hover,:focus-visible):not(:disabled){
  background:#fff1d6;color:var(--墨)}
body.店員 :is(.btn:not(.primary,.fill,.danger,.del,.tdel,.warn),.small-btn,button.secondary,button.sub,.refresh,.reload,.outline,.mild,.csv-button,.add-btn):active:not(:disabled){
  transform:translate(2px,2px);box-shadow:none}
body.店員 :is(.btn:not(.primary,.fill,.danger,.del,.tdel,.warn),.small-btn,button.secondary,button.sub,.refresh,.reload,.outline,.mild,.csv-button,.add-btn):disabled{
  background:#eadbc4;color:#8a7a66;border-color:#8a7a66;box-shadow:none;cursor:not-allowed}

/* 「読み直す」「更新」は1行のまま（字の幅が広がって横の文字に押され、OG14 で「読み直\nす」と折れていた） */
body.店員 :is(.refresh,.reload){white-space:nowrap;flex-shrink:0}

/* ── 2026-09-28 検証で見つけた崩れ
   黒い帯の札（画面の名前）：OG7 は自分の .quiet に明るい地と角丸を持っていて、白い字が読めなかった */
body.店員 .昔-頭 .quiet{background:transparent;border-radius:0;margin-bottom:0}
/* 元の紺の見出し帯（OG14・OG21 の header.top）は黒い帯と二重に見えるので紙の地へ（刷る時の決まりは画面の側のまま） */
body.店員 header.top{background:transparent;color:var(--墨)}
body.店員 header.top :is(.eyebrow,.sub){color:var(--薄墨)}
/* OG20「入れるカード」：この字は横に広く、長い商品名で選ぶ欄が伸びて「＋」が次の行へ押し出された。選ぶ欄を残りの幅に縮める */
/*   基準360px＝右の4つ（−・数・＋・一覧へ足す＝約335px）と並ぶだけの幅が無い時は、選ぶ欄が1行を使い、4つは次の行にそろう */
body.店員 .stock select:not(#昔){flex:1 1 360px}

/* ── 画面に出している紙の見本：字も見出しも元のまま（色は画面の側が書いてある物のまま） */
body.店員 #out .sheet{font-family:"Yu Gothic","YuGothic","Meiryo","Hiragino Kaku Gothic ProN","MS PGothic",sans-serif;color:#000}
body.店員 #detail .sheet{font-family:system-ui,-apple-system,"Yu Gothic",Meiryo,sans-serif}
body.店員 .sheet :is(h1,h2,h3){font-family:inherit;letter-spacing:normal}
body.店員 .sheet :is(h1,h2,h3)::before{content:none}

/* ── 左上のロゴ＝画面の入口（ホーム）へのリンク（2026-10-07・ハスイ。10-29 に一度「今日やること」へ変え、同日ハスイの決定で入口へ戻した）。
   organic-api-real.js の 店員の道を足す() が .brand を <a class="昔-ロゴ"> で包み、隣に「今日やること」のボタン（.昔-今日やること）を置く（2つを .昔-左上 で並べる）。
   見た目はロゴのまま（下線・色を変えない）。押すと少し沈む */
/* 塊のまま（下の画面の名前の札を次の行に残す）・押せる所はロゴの幅だけ */
body.店員 .昔-ロゴ{display:block;width:fit-content;max-width:100%;color:inherit;text-decoration:none;cursor:pointer}
body.店員 .昔-ロゴ:active{transform:translateY(2px)}
/* 「今日やること」のボタン（2026-10-29・ハスイ決定）：右上の「≡」と同じ形（帯の色・白い縁・押すと黄）。狭い画面ではロゴの下へ回る */
body.店員 .昔-左上{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
body.店員 .昔-今日やること{display:inline-flex;align-items:center;min-height:34px;padding:2px 12px;border:2px solid #fff;border-radius:0;background:var(--帯);color:#fff;
  font:700 14px/1.2 "BIZ UDPGothic","Yu Gothic UI",system-ui,sans-serif;letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer}
body.店員 .昔-今日やること:is(:hover,:focus-visible){color:var(--黄);border-color:var(--黄)}
body.店員 .昔-今日やること:active{transform:translateY(2px)}

/* ── 右上の「≡」（ほかの店員の画面へ。2026-10-07・ハスイ）。organic-api-real.js の 店員の道を足す() が帯に足す（帯の無い画面は右上に固定）。
   帯の右下の飾りは「≡」の左へずらす（重ねない）。狭い画面では飾りを出さず、字の幅を残す。
   窓は帯の外に置く（帯は overflow:hidden）。上と右の位置は開く時に「≡」の真下へ合わせる */
body.店員 .昔-頭.三本線あり{padding-right:148px}
body.店員 .昔-頭.三本線あり::after{right:64px}
body.店員 .昔-三本線{position:absolute;top:6px;right:8px;z-index:1;width:44px;height:44px;margin:0;padding:0;
  border:2px solid #fff;border-radius:0;background:var(--帯);color:#fff;font:700 26px/1 "BIZ UDPGothic","Yu Gothic UI",system-ui,sans-serif;cursor:pointer}
body.店員 .昔-三本線:is(:hover,:focus-visible,[aria-expanded=true]){color:var(--黄);border-color:var(--黄)}
body.店員 .昔-三本線.帯なし{position:fixed;top:8px;right:8px;z-index:1000;box-shadow:2px 2px 0 var(--影)}
body.店員 .昔-三本線の窓{display:block;position:fixed;right:8px;z-index:100000;box-sizing:border-box;width:min(340px,calc(100vw - 16px));
  overflow:auto;overscroll-behavior:contain;padding:6px 0;background:var(--紙);color:var(--墨);border:3px solid var(--墨);
  box-shadow:4px 4px 0 var(--影);font:14px/1.4 "BIZ UDPGothic","Yu Gothic UI",system-ui,sans-serif;text-align:left}
body.店員 .昔-三本線の窓 a{display:flex;gap:8px;align-items:baseline;box-sizing:border-box;min-height:44px;padding:11px 14px;color:var(--墨);text-decoration:none}
body.店員 .昔-三本線の窓 a:is(:hover,:focus-visible){background:#fff1d6}
body.店員 .昔-三本線の窓 a.固定{font-weight:700}
body.店員 .昔-三本線の窓 a[aria-current=page]{background:#fbe0bb;font-weight:700}
body.店員 .昔-三本線の窓 a[aria-current=page]::after{content:"いまの画面";margin-left:auto;padding-left:6px;font-size:11px;color:var(--薄墨);white-space:nowrap}
body.店員 .昔-三本線の窓 .番号{flex:0 0 4.4em;font-size:12px;color:var(--薄墨)}
body.店員 .昔-三本線の窓 hr{margin:6px 0;border:0;border-top:2px solid var(--墨)}
/* 区切り（入口の店員の欄の h3＝仕事の流れ）。黒い帯で、どこからどこまでが同じ仕事か分かるように */
body.店員 .昔-三本線の窓 .区切り{margin:8px 0 2px;padding:5px 14px;background:var(--帯);color:#fff;font:700 13px/1.4 var(--角字);letter-spacing:.02em}
body.店員 .昔-三本線の窓 > div > .区切り:first-child{margin-top:0}
/* まだの作業の件数（赤丸に白い数字。0 と数えられなかった口は出さない＝JS が付けない） */
body.店員 .昔-件数{display:inline-block;box-sizing:border-box;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:#c62828;color:#fff;font:700 12px/22px system-ui,sans-serif;text-align:center;font-variant-numeric:tabular-nums}
body.店員 .昔-三本線 .昔-件数{position:absolute;top:-4px;right:-6px;border:2px solid #fff;line-height:18px}
body.店員 .昔-三本線の窓 a .昔-件数{margin-left:auto;align-self:center}
body.店員 .昔-三本線の窓 a[aria-current=page]:has(.昔-件数)::after{margin-left:6px}
body.店員 .昔-三本線の窓 p{margin:0;padding:11px 14px;color:var(--薄墨)}
@media (max-width:480px){
  body.店員 .昔-頭.三本線あり{padding-right:64px}
  body.店員 .昔-頭.三本線あり::after{display:none}
}
}