/* day. ワーカーの地図: 職種で探す札（2026-11-08 CEO「エアビーみたいに横スクロール・複数選択」）。
   中身（並び・名前・アイコン）は genba_trades.TRADES の1か所。ここは見た目だけ */
.tradebar{pointer-events:auto;position:relative;margin:8px -12px 0}
.trow{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:3px 12px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-padding:0 12px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 11px,#000 calc(100% - 28px),transparent 100%)}   /* 左の余白（「すべて」より外）に流れた札は消す */
.trow::-webkit-scrollbar{display:none}
.tc{flex:0 0 auto;scroll-snap-align:start;-webkit-appearance:none;appearance:none;border:1.5px solid transparent;box-sizing:border-box;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:64px;height:62px;padding:0 10px;
  border-radius:16px;background:rgba(255,255,255,.97);color:var(--ink2);
  box-shadow:0 2px 8px rgba(16,20,24,.12),0 0 0 1px rgba(16,20,24,.05);
  transition:transform .16s cubic-bezier(.22,1,.36,1),background .18s,color .18s,box-shadow .18s,opacity .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative}
.tc svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.tc span{font-size:11px;font-weight:800;line-height:1;letter-spacing:.01em;white-space:nowrap}
.tc:active{transform:scale(.93)}
/* 選んだ札＝薄いオレンジ＋オレンジの縁（2026-11-08 CEO「黒いのはやめて」→ A案。塗りつぶしのオレンジはピンと混ざるので使わない） */
.tc.on{background:var(--accsoft);border-color:var(--acc);color:#c2410c;box-shadow:0 4px 12px rgba(228,87,27,.18)}
.tc.on svg{stroke-width:2;transform:translateY(-1px)}
/* この辺りに1件も無い職種は薄く（押せる。押せば「この辺りにはまだありません」と地図を動かす案内が出る） */
.tc.none:not(.on){opacity:.48;box-shadow:0 1px 4px rgba(16,20,24,.08),0 0 0 1px rgba(16,20,24,.04)}
/* 選んだ数（「すべて」の札の右上） */
.tc .tn{position:absolute;top:5px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--acc);color:#fff;
  font-size:10px;font-weight:800;display:none;place-items:center;font-family:Manrope,-apple-system,sans-serif;letter-spacing:0}
.tc.all.has .tn{display:grid}
.tc.all.has{color:var(--ink)}
@media (hover:hover){ .tc:not(.on):hover{color:var(--ink);box-shadow:0 4px 12px rgba(16,20,24,.16),0 0 0 1px rgba(16,20,24,.08)} }
@media (prefers-reduced-motion:reduce){ .tc,.tc svg{transition:none} }
/* 一覧を全開にしても札に被らない（--topz は一覧の上に空ける帯の高さ。札の行のぶんを足す） */
body.has-trades .sheet{--topz:calc(var(--sat) + 84px + 74px)}
@media (min-width:720px){ .tradebar{margin-right:0} body.has-trades .sheet{--topz:0px} }
/* 絞り込み中で1件も無い時の一覧 */
.trade-empty{padding:26px 22px 30px;text-align:center;color:var(--ink2);font-size:13.5px;line-height:1.7}
.trade-empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.trade-empty button{margin-top:14px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:800;font-size:13.5px;padding:11px 18px;font-family:inherit}
/* 一覧の見出し: 「近くの募集」は削らず、絞っている職種の札を小さく横に（はみ出す分は … ） */
body.has-trades #shWord{flex:0 0 auto}
body.has-trades #shSub:not(:empty){font-size:11px;font-weight:800;color:var(--ink);background:#f1f3f5;border-radius:999px;padding:3px 8px;
  overflow:hidden;text-overflow:ellipsis;min-width:0;align-self:center;line-height:1.2}
/* 2026-11-08 CEO「全て、のとこを、常に固定表示で、なんか安心する感じのアイコン…と簡単な説明を超短く邪魔にならないデザインで」
   ＝左に貼り付く（横に送っても残る）・盾のチェック・色は他の札と同じ（CEO「色合いはちゃんと元のやつのままに」）・小さく「未経験歓迎」。流れてくる札は下に潜る */
.tc.all{position:sticky;left:0;z-index:2;gap:3px;min-width:68px}   /* left:0＝行の内側の端（行の左の余白12pxの内側）に貼り付く */
.tc.all svg{width:21px;height:21px}
.tc.all .tok{font-size:9px;font-weight:800;line-height:1;color:inherit;opacity:.85;letter-spacing:.02em;white-space:nowrap}
.tc.all.has .tok{display:none}