/* Faro モバイルアプリ — 共通スタイル
   色: 青 #2563eb + ニュートラル（白/黒/グレー）。3色以内。グラデ・絵文字・片側ボーダー色分けなし。 */
:root{
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --blue-soft:#eff4ff;
  --ink:#0f1115;
  --ink-soft:#5b616e;
  --ink-mute:#646b76;
  --line:#e6e8ec;
  --line-soft:#f0f2f5;
  --bg:#f5f7fa;
  --card:#ffffff;
  --ok:#1f7a52;        --ok-bg:#e7f5ee;
  --warn:#9a5a00;      --warn-bg:#fdf1dd;
  --new:#1d4ed8;       --new-bg:#e8efff;
  --mtg:#2563eb;       --mtg-bg:#e8efff;
  --header-h:54px;
  --tabbar-h:62px;
  --maxw:480px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased;
  font-feature-settings:"palt";
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
img{max-width:100%;height:auto;display:block;}
a{color:var(--blue);text-decoration:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0;font-weight:700;}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* ====== shell ====== */
.app{max-width:var(--maxw);margin:0 auto;background:var(--bg);min-height:100vh;position:relative;}
.app-header{position:sticky;top:0;z-index:30;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;background:var(--card);border-bottom:1px solid var(--line);}
.app-header .hdr-btn{width:40px;height:40px;display:grid;place-items:center;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:8px;}
.app-header .hdr-btn:hover{background:var(--line-soft);}
.app-header .wordmark{font-weight:800;font-size:1.18rem;letter-spacing:.01em;color:var(--ink);}
.app-header .bell{position:relative;}
.app-header .bell::after{content:"";position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--blue);border:1.5px solid var(--card);}

main{display:block;padding:18px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);}
main:focus{outline:none;}
.page-title{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;margin:2px 0 16px;}
.page-title .sub{display:block;font-size:.8rem;font-weight:500;color:var(--ink-mute);margin-top:2px;}

/* ====== tab bar ====== */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--maxw);z-index:40;
  display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);}
.tabbar a{min-height:var(--tabbar-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ink-mute);font-size:.66rem;font-weight:600;text-decoration:none;}
.tabbar a svg{width:23px;height:23px;}
.tabbar a[aria-current="page"]{color:var(--blue);font-weight:700;}
.tabbar a[aria-current="page"] svg{stroke:var(--blue);}

/* ====== cards / sections ====== */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;}
.stack{display:flex;flex-direction:column;gap:14px;}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px;}
.section-head h2{font-size:1.05rem;font-weight:700;margin:0;}
.section-head a{font-size:.82rem;font-weight:600;}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;}

/* filter pills */
.toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.select{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:11px 14px;font-size:.9rem;font-weight:600;color:var(--ink);}
.select svg{flex:none;color:var(--ink-mute);}
.select--pill{flex:none!important;white-space:nowrap;gap:6px;color:var(--ink-soft);}
.select--pill::after{content:"";width:7px;height:7px;border-right:2px solid var(--ink-mute);border-bottom:2px solid var(--ink-mute);transform:rotate(45deg);margin-top:-3px;margin-left:2px;}
.toolbar .select{white-space:nowrap;overflow:hidden;}
@media (max-width:430px){.toolbar{flex-direction:column;}.toolbar .select{width:100%;}}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;margin-bottom:8px;-webkit-overflow-scrolling:touch;}
.chip{flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);border-radius:999px;padding:8px 15px;font-size:.84rem;font-weight:600;cursor:pointer;}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;}
.chip .cnt{margin-left:6px;font-variant-numeric:tabular-nums;}

/* ====== KPI ====== */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;}
.kpi .lbl{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-soft);font-weight:600;margin-bottom:6px;}
.kpi .lbl .ic{width:30px;height:30px;border-radius:9px;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue);flex:none;}
.kpi .val{font-size:1.7rem;font-weight:800;letter-spacing:-.01em;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1.1;}
.kpi .val .u{font-size:.85rem;font-weight:700;color:var(--ink);margin-left:2px;}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums;}
.delta.up{color:var(--ok);}
.delta.down{color:#b3261e;}
.delta svg{width:13px;height:13px;}

/* KPI inline (report top) */
.kpi-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 10px;}
.kpi-rail .it{text-align:left;padding:0 6px;}
.kpi-rail .it+.it{border-left:1px solid var(--line-soft);}
.kpi-rail .lbl{font-size:.72rem;color:var(--ink-soft);font-weight:600;}
.kpi-rail .val{font-size:1.15rem;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums;}

/* ====== list rows ====== */
.list{list-style:none;margin:0;padding:0;}
.list li{border-bottom:1px solid var(--line-soft);}
.list li:last-child{border-bottom:0;}
.lead-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 2px;}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none;}
.lead-row .nm{font-weight:700;font-size:.94rem;}
.lead-row .meta{font-size:.8rem;color:var(--ink-soft);}
.lead-row .rt{text-align:right;font-size:.78rem;color:var(--ink-mute);white-space:nowrap;}

/* ====== badges ====== */
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:6px;border:1px solid transparent;white-space:nowrap;}
.badge--new{color:var(--new);background:var(--new-bg);border-color:#cfe0ff;}
.badge--warn{color:var(--warn);background:var(--warn-bg);border-color:#f4dca8;}
.badge--ok{color:var(--ok);background:var(--ok-bg);border-color:#bfe6d2;}
.badge--mtg{color:var(--mtg);background:var(--mtg-bg);border-color:#cfe0ff;}

/* ====== chart ====== */
.chart-card .chart{width:100%;height:auto;}
.legend{display:flex;gap:16px;font-size:.78rem;color:var(--ink-soft);margin:4px 0 10px;}
.legend .k{display:inline-flex;align-items:center;gap:6px;}
.legend .ln{width:16px;height:0;border-top:2px solid var(--blue);}
.legend .ln.dash{border-top-style:dashed;}

/* data table (chart alt / media perf) */
.tbl{width:100%;border-collapse:collapse;font-size:.86rem;}
.tbl caption{text-align:left;font-weight:700;margin-bottom:8px;}
.tbl th,.tbl td{padding:9px 8px;border-bottom:1px solid var(--line-soft);text-align:right;font-variant-numeric:tabular-nums;}
.tbl th[scope="row"],.tbl td:first-child{text-align:left;}
.tbl thead th{color:var(--ink-soft);font-weight:600;font-size:.78rem;}
.media-name{display:flex;align-items:center;gap:8px;font-weight:600;}
.media-name img{width:18px;height:18px;}

/* quick actions */
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.qa{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 6px;font-size:.74rem;font-weight:600;color:var(--ink);text-align:center;}
.qa .ic{width:34px;height:34px;border-radius:50%;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue);}

/* todo / notice list */
.mini-list{list-style:none;margin:0;padding:0;}
.mini-list li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-soft);}
.mini-list li:last-child{border-bottom:0;}
.mini-list .ic{width:32px;height:32px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none;}
.mini-list .tt{font-weight:600;font-size:.9rem;}
.mini-list .ds{font-size:.8rem;color:var(--ink-soft);}
.mini-list .rt{margin-left:auto;font-size:.76rem;color:var(--ink-mute);white-space:nowrap;}
.check{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;}
.check.on{background:var(--blue);border-color:var(--blue);color:#fff;}

/* ====== stepper (inquiry detail) ====== */
.stepper{display:flex;align-items:flex-start;justify-content:space-between;margin:6px 0 4px;}
.stepper .st{flex:1;text-align:center;position:relative;font-size:.74rem;color:var(--ink-mute);}
.stepper .st .dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:grid;place-items:center;margin:0 auto 6px;font-weight:700;font-size:.8rem;color:var(--ink-mute);}
.stepper .st.done .dot,.stepper .st.cur .dot{background:var(--blue);border-color:var(--blue);color:#fff;}
.stepper .st.cur{color:var(--ink);font-weight:700;}
.stepper .st::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line);z-index:-1;}
.stepper .st:first-child::before{display:none;}
.stepper .st.done::before,.stepper .st.cur::before{background:var(--blue);}
.stepper-wrap{position:relative;z-index:0;}

/* timeline */
.timeline{list-style:none;margin:6px 0 0;padding:0;}
.timeline li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding-bottom:16px;position:relative;}
.timeline .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;z-index:1;}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:14px;top:30px;bottom:0;width:2px;background:var(--line);}
.timeline .tt{font-weight:700;font-size:.9rem;}
.timeline .bd{font-size:.84rem;color:var(--ink-soft);}
.timeline .rt{font-size:.76rem;color:var(--ink-mute);}

/* ====== chat ====== */
.chat-head{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:14px;}
.chat-head .nm{font-weight:700;}
.chat-head .on{font-size:.78rem;color:var(--ok);display:flex;align-items:center;gap:5px;}
.chat-head .on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);}
.chatlog{display:flex;flex-direction:column;gap:12px;}
.daysep{text-align:center;font-size:.74rem;color:var(--ink-mute);margin:4px 0;}
.msg{max-width:80%;}
.msg p{margin:0;padding:10px 13px;border-radius:14px;font-size:.88rem;}
.msg time{display:block;font-size:.68rem;color:var(--ink-mute);margin-top:3px;}
.msg--recv{align-self:flex-start;}
.msg--recv p{background:var(--card);border:1px solid var(--line);border-top-left-radius:4px;}
.msg--sent{align-self:flex-end;text-align:right;}
.msg--sent p{background:var(--blue);color:#fff;border-top-right-radius:4px;}
.composer{position:sticky;bottom:0;display:flex;gap:8px;align-items:center;padding:10px 0;background:var(--bg);}
.composer textarea{flex:1;border:1px solid var(--line);border-radius:22px;padding:10px 16px;font:inherit;font-size:.9rem;resize:none;min-height:42px;max-height:120px;background:var(--card);}
.composer button{width:42px;height:42px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;}
.composer--docked{position:fixed;bottom:var(--tabbar-h);left:50%;transform:translateX(-50%);width:100%;max-width:var(--maxw);padding:10px 16px;border-top:1px solid var(--line);}

/* file chip */
.filechip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-top:8px;background:var(--card);}
.filechip .ic{width:30px;height:34px;border-radius:5px;background:#fce8e6;color:#c5221f;display:grid;place-items:center;font-size:.6rem;font-weight:800;flex:none;}
.filechip .fn{font-size:.82rem;font-weight:600;}
.filechip .fm{font-size:.72rem;color:var(--ink-mute);}

/* ====== settings ====== */
.set-group{margin-bottom:18px;}
.set-group h2{font-size:.86rem;color:var(--ink-soft);font-weight:700;margin:0 0 8px;}
.set-list{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.set-list li{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--line-soft);}
.set-list li:last-child{border-bottom:0;}
.set-list .ic{width:34px;height:34px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none;}
.set-list .tt{font-weight:600;font-size:.92rem;}
.set-list .ds{font-size:.78rem;color:var(--ink-soft);}
.set-list .rt{margin-left:auto;color:var(--ink-mute);font-size:.85rem;display:flex;align-items:center;gap:6px;}
.switch{position:relative;display:inline-flex;align-items:center;margin-left:auto;cursor:pointer;}
.switch input{position:absolute;opacity:0;width:46px;height:28px;margin:0;cursor:pointer;}
.switch .track{width:46px;height:28px;border-radius:999px;background:#d4d7dd;position:relative;transition:background .15s;}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.switch input:checked + .track{background:var(--blue);}
.switch input:checked + .track::after{transform:translateX(18px);}
.switch input:focus-visible + .track{outline:2px solid var(--blue);outline-offset:2px;}
.swatch{width:18px;height:18px;border-radius:50%;background:var(--blue);}
.btn-mini{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:7px 14px;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;}
.btn-mini:hover{background:var(--blue-dark);}

/* demo banner */
.demo-note{max-width:var(--maxw);margin:0 auto;background:#fff7e6;border-bottom:1px solid #f0dca8;color:#7a5400;font-size:.76rem;text-align:center;padding:6px 12px;}

.note{font-size:.78rem;color:var(--ink-soft);}
.muted{color:var(--ink-soft);}
.mt8{margin-top:8px;} .mt16{margin-top:16px;}