/* MCX 現場管理 — 明るい売場でグローをした手でも押せることを最優先 */
:root{
  --ink:#0E1622;        /* 濃紺黒 */
  --paper:#E9EDF2;      /* 冷たいグレー（現場の紙より少し暗く、反射を抑える） */
  --card:#FFFFFF;
  --line:#C2CCD8;
  --line2:#DEE5ED;
  --muted:#5B6878;
  --accent:#E8590C;     /* 安全色オレンジ：期限と警告のみに使う */
  --ok:#0F6B46;
  --bad:#B3261E;
  --focus:#1B6AC9;
  --r:10px;
  --tap:48px;           /* 最小タップ高さ */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:16px;line-height:1.6;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--focus);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px
}

/* ---- ヘッダー ---- */
.top{background:var(--ink);color:#fff;position:sticky;top:0;z-index:20}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem}
.brand{display:flex;align-items:baseline;gap:.45rem;color:#fff}
.brand-k{font-weight:800;letter-spacing:.06em;font-size:1.05rem}
.brand-n{font-size:.74rem;color:#9FB0C4;font-variant-numeric:tabular-nums}
.who{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:#C3CEDB}
.lo{color:#9FB0C4;border:1px solid #33465E;border-radius:6px;padding:.2rem .45rem}
.nav{display:flex;overflow-x:auto;background:#16233A;-webkit-overflow-scrolling:touch}
.nav a{
  flex:1 0 auto;min-width:5.2rem;text-align:center;color:#B9C6D6;
  padding:.7rem .5rem;font-size:.85rem;font-weight:600;border-bottom:3px solid transparent;white-space:nowrap
}
.nav a.on{color:#fff;border-bottom-color:var(--accent);background:#1D2C46}

.wrap{max-width:56rem;margin:0 auto;padding:.85rem .75rem 3rem}
.foot{max-width:56rem;margin:0 auto;padding:0 .75rem 2rem;color:var(--muted);font-size:.72rem}

/* ---- 見出し ---- */
h1{font-size:1.15rem;margin:.2rem 0 .8rem}
h2{font-size:.95rem;margin:1.4rem 0 .5rem;padding-left:.5rem;border-left:4px solid var(--ink)}
h3{font-size:.88rem;margin:1rem 0 .4rem;color:var(--muted)}
p{margin:0 0 .6rem}
.sub{color:var(--muted);font-size:.8rem}

/* ---- カード ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.85rem;margin:0 0 .8rem}
.card>h2:first-child{margin-top:0}
.card.hi{border-color:var(--accent);border-width:2px}

/* ---- 工程ストリップ（この現場の“今”を1行で） ---- */
.strip{display:flex;gap:2px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:.5rem;overflow:hidden;margin-bottom:.55rem}
.strip .c{flex:1 1 0;min-width:0;height:30px;border-radius:3px;background:#DCE3EB;display:block;position:relative}
.strip .c i{position:absolute;inset:0;border-radius:3px}
.strip .c.ok{background:var(--ok)}
.strip .c.draft{background:#F2C14E}
.strip .c.miss{background:var(--bad)}
.strip .c.now{outline:3px solid var(--ink);outline-offset:1px;z-index:2}

.gauges{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:1rem}
.g{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.55rem .65rem}
.g.bad{border-color:var(--bad);background:#FEF4F3}
.gl{display:block;font-size:.7rem;color:var(--muted);letter-spacing:.04em}
.gv{display:block;font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
.gv small{font-size:.7rem;font-weight:600;color:var(--muted);margin-left:.15rem}
.gn{display:block;font-size:.68rem;color:var(--muted)}
.g.bad .gv{color:var(--bad)}
@media(min-width:640px){.gauges{grid-template-columns:repeat(4,1fr)}}

/* ---- リスト行 ---- */
.rows{list-style:none;margin:0;padding:0}
.rows li{border-bottom:1px solid var(--line2)}
.rows li:last-child{border-bottom:0}
.row{display:flex;align-items:center;gap:.6rem;min-height:var(--tap);padding:.55rem .1rem;color:inherit}
.row .rt{flex:1;min-width:0}
.row .rt b{display:block;font-size:.92rem;font-weight:700}
.row .rt span{display:block;font-size:.75rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .rr{font-size:.75rem;color:var(--muted);text-align:right;white-space:nowrap}
.date-chip{flex:0 0 3.4rem;text-align:center;background:#EEF2F7;border:1px solid var(--line2);
  border-radius:8px;padding:.2rem 0;font-variant-numeric:tabular-nums}
.date-chip b{display:block;font-size:.95rem;font-weight:800;line-height:1.1}
.date-chip span{display:block;font-size:.65rem;color:var(--muted)}
.date-chip.sun{background:#FBEDEC;border-color:#EFC9C6}

/* ---- バッジ ---- */
.bdg{display:inline-block;font-size:.68rem;font-weight:700;padding:.12rem .4rem;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:#F4F7FA;white-space:nowrap}
.bdg.ok{background:#E7F3ED;border-color:#A9D2BF;color:var(--ok)}
.bdg.bad{background:#FBEAE8;border-color:#E9B4AF;color:var(--bad)}
.bdg.warn{background:#FDEEE2;border-color:#F2C39A;color:#9A4408}
.bdg.info{background:#E8EFF9;border-color:#B4C8E6;color:#1B4E8F}

/* ---- フォーム ---- */
label{display:block;font-size:.8rem;font-weight:700;margin:.7rem 0 .2rem}
input[type=text],input[type=number],input[type=date],input[type=password],input[type=time],select,textarea{
  width:100%;min-height:var(--tap);padding:.55rem .6rem;font-size:16px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-family:inherit
}
textarea{min-height:5.5rem;line-height:1.55;resize:vertical}
.en textarea,.en input[type=text]{background:#FBFCFE;border-color:#B7C6DA}
.hint{font-size:.72rem;color:var(--muted);font-weight:400;margin:.15rem 0 0}
.two{display:grid;grid-template-columns:1fr;gap:0 .7rem}
@media(min-width:640px){.two{grid-template-columns:1fr 1fr}}

.chk{display:flex;align-items:center;gap:.55rem;min-height:var(--tap);margin:0;
  font-weight:600;font-size:.88rem;border-bottom:1px solid var(--line2)}
.chk:last-of-type{border-bottom:0}
.chk input{width:26px;height:26px;flex:0 0 26px;accent-color:var(--ink)}
.codes{display:flex;flex-wrap:wrap;gap:.4rem;margin:.3rem 0 .2rem}
.code{display:flex;align-items:center;gap:.35rem;border:1px solid var(--line);border-radius:8px;
  padding:.4rem .55rem;background:#fff;font-size:.8rem;font-weight:700;min-height:44px}
.code input{width:22px;height:22px;accent-color:var(--ink)}
.code.on{background:#E8EFF9;border-color:#7FA3D4}

/* ---- ボタン ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:var(--tap);padding:.6rem 1rem;border-radius:9px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;font-size:.92rem;font-weight:700;cursor:pointer;font-family:inherit}
.btn.sec{background:#fff;color:var(--ink)}
.btn.warn{background:var(--accent);border-color:var(--accent)}
.btn.danger{background:#fff;color:var(--bad);border-color:var(--bad)}
.btn.sm{min-height:38px;padding:.3rem .7rem;font-size:.8rem}
.btn[disabled]{opacity:.45}
.bar{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0}
.bar.sticky{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(233,237,242,0),var(--paper) 35%);
  padding:.7rem 0 .5rem;z-index:10}

/* ---- 表 ---- */
table{width:100%;border-collapse:collapse;font-size:.8rem}
th,td{border:1px solid var(--line);padding:.4rem .45rem;text-align:left;vertical-align:top}
th{background:#EEF2F7;font-size:.74rem}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- 英文プレビュー ---- */
.en-box{background:#0E1622;color:#E7EDF5;border-radius:var(--r);padding:.75rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;max-height:26rem;overflow:auto}

/* ---- 写真 ---- */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem}
.thumb{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.thumb img{display:block;width:100%;height:96px;object-fit:cover}
.thumb figcaption{font-size:.66rem;padding:.25rem .3rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- フラッシュ ---- */
.flash{border-radius:8px;padding:.6rem .75rem;font-size:.85rem;font-weight:700;margin:0 0 .8rem}
.flash.ok{background:#E7F3ED;border:1px solid #A9D2BF;color:var(--ok)}
.flash.bad{background:#FBEAE8;border:1px solid #E9B4AF;color:var(--bad)}
.flash.warn{background:#FDEEE2;border:1px solid #F2C39A;color:#9A4408}

.alert{border-left:5px solid var(--accent);background:#FFF6EF;border-radius:0 8px 8px 0;
  padding:.6rem .75rem;font-size:.82rem;margin:0 0 .7rem}
.alert.bad{border-left-color:var(--bad);background:#FEF4F3}
.alert b{display:block}

.empty{color:var(--muted);font-size:.85rem;padding:1.2rem .2rem;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r)}

/* ---- ログイン ---- */
.login{max-width:22rem;margin:3rem auto;padding:0 1rem}
.login .card{padding:1.2rem}
.login h1{text-align:center;margin-bottom:.2rem}
.login .sub{text-align:center;margin-bottom:1rem}

@media print{
  .top,.nav,.foot,.bar,.strip,.gauges{display:none!important}
  body{background:#fff;font-size:10pt}
  .wrap{max-width:none;padding:0}
  .card{border:none;padding:0}
  .en-box{background:#fff;color:#000;border:1px solid #999;max-height:none;font-size:8.6pt}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- 作業コード（記号＋短い名前を必ずセットで見せる） ---- */
.ctag{display:inline-flex;align-items:center;gap:.3rem;padding:.16rem .45rem;border-radius:6px;
  font-size:.74rem;font-weight:700;color:#fff;background:#5B6878;white-space:nowrap;margin:.1rem .2rem .1rem 0}
.ctag b{font-size:.82rem;font-weight:800;letter-spacing:.02em}
.ctag.gray{background:#5B6878}
.ctag.rust{background:#9A4408}
.ctag.blue{background:#1B4E8F}
.ctag.green{background:#0F6B46}
.ctag.purple{background:#6A3D8F}
.ctag.navy{background:#0E1622}
.cline{display:flex;gap:.45rem;align-items:flex-start;margin-bottom:.35rem}
.cline>span:last-child{font-size:.78rem;line-height:1.45}

/* 日報のコードチップ：記号を大きく、名前を添える */
.code span{display:flex;align-items:baseline;gap:.3rem}
.code span b{font-size:.95rem;font-weight:800}
.code.rust{border-color:#D8A87E}
.code.blue{border-color:#8FB0D8}
.code.green{border-color:#8AC0A6}
.code.purple{border-color:#B79AD1}
.code.navy{border-color:#8A97A8}
.code.on{background:#E8EFF9;border-color:#4A7BBF;box-shadow:inset 0 0 0 1px #4A7BBF}

/* コード早見表 */
.codecard{padding:.7rem}
.ch{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.cbig{flex:0 0 3.1rem;height:3.1rem;border-radius:10px;color:#fff;background:#5B6878;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:800;letter-spacing:.02em}
.cbig.gray{background:#5B6878}
.cbig.rust{background:#9A4408}
.cbig.blue{background:#1B4E8F}
.cbig.green{background:#0F6B46}
.cbig.purple{background:#6A3D8F}
.cbig.navy{background:#0E1622}
.cn{flex:1;min-width:0}
.cn b{display:block;font-size:1.02rem;line-height:1.3}
.cn span{display:block;font-size:.75rem;color:var(--muted);line-height:1.4}
.dolist{margin:.2rem 0 .5rem;padding-left:1.3rem;font-size:.85rem}
.dolist li{margin-bottom:.3rem}
.carebox{background:#FFF6EF;border-left:4px solid var(--accent);border-radius:0 6px 6px 0;
  padding:.45rem .6rem;font-size:.8rem;margin:0 0 .4rem}
.carebox b{display:block;color:#9A4408;font-size:.74rem}