/* ============================================================
   CES — mock product screens (faux UI for marketing visuals)
   Namespace: .mk   Built on CES tokens.
   ============================================================ */

.mk { font-family: var(--font-sans); color: var(--ink-900); font-size: 13px; line-height: 1.4; background: var(--bg-page); }
.mk * { box-sizing: border-box; }

/* status badges */
.mk-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: var(--w-extrabold); white-space: nowrap; }
.mk-badge .dt { width: 6px; height: 6px; border-radius: 50%; }
.mk-badge.ok   { background: var(--success-bg); color: #3f7a28; }
.mk-badge.ok .dt   { background: var(--success); }
.mk-badge.due  { background: var(--warning-bg); color: #9a7212; }
.mk-badge.due .dt  { background: #e0a818; }
.mk-badge.over { background: var(--danger-bg); color: #a8264c; }
.mk-badge.over .dt { background: var(--danger); }
.mk-badge.prog { background: var(--pending-bg); color: #b25e22; }
.mk-badge.prog .dt { background: var(--pending); }
.mk-badge.sch  { background: var(--info-bg); color: #2a6f99; }
.mk-badge.sch .dt  { background: var(--info); }

/* ---------- PORTAL (web app) ---------- */
.mk-portal { display: grid; grid-template-columns: 188px 1fr; min-height: 100%; }
.mk-side { background: var(--ces-navy); color: #dce5f3; padding: 14px 12px; }
.mk-side-logo { display: flex; align-items: center; gap: 8px; padding: 4px 6px 14px; }
.mk-side-logo img { height: 22px; }
.mk-side-logo b { color: #fff; font-weight: var(--w-black); font-size: 15px; letter-spacing: -.01em; }
.mk-nav { display: flex; flex-direction: column; gap: 2px; }
.mk-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); color: #c2cfe6; text-decoration: none; font-weight: var(--w-semibold); font-size: 12.5px; }
.mk-nav a svg, .mk-nav a i { width: 15px; height: 15px; }
.mk-nav a.on { background: rgba(255,255,255,.14); color: #fff; }
.mk-nav a.on .acc { color: #ff8fb0; }
.mk-main { background: var(--bg-page); padding: 16px 18px; overflow: hidden; }
.mk-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mk-topbar h3 { font-size: 17px; font-weight: var(--w-black); letter-spacing: -.01em; }
.mk-topbar .sub { font-size: 11.5px; color: var(--fg4); margin-top: 1px; }
.mk-search { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 12px; font-size: 12px; color: var(--fg4); }
.mk-search svg, .mk-search i { width: 13px; height: 13px; }
.mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.mk-kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; }
.mk-kpi .lab { font-size: 11px; color: var(--fg4); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 6px; }
.mk-kpi .lab .ico { width: 22px; height: 22px; border-radius: var(--r-xs); display: grid; place-items: center; }
.mk-kpi .lab .ico svg, .mk-kpi .lab .ico i { width: 13px; height: 13px; }
.mk-kpi .val { font-size: 26px; font-weight: var(--w-black); letter-spacing: -.02em; margin-top: 8px; }
.mk-kpi .delta { font-size: 11px; font-weight: var(--w-bold); margin-top: 2px; }
.mk-kpi .delta.up { color: #3f7a28; }
.mk-kpi .delta.down { color: var(--danger); }

.mk-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.mk-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid var(--border); }
.mk-panel-head h4 { font-size: 13px; font-weight: var(--w-extrabold); }
.mk-panel-head a { font-size: 11.5px; font-weight: var(--w-bold); color: var(--ces-navy); text-decoration: none; }
.mk-table { width: 100%; border-collapse: collapse; }
.mk-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg4); font-weight: var(--w-extrabold); padding: 8px 13px; border-bottom: 1px solid var(--border); background: var(--bg-page); }
.mk-table td { padding: 9px 13px; border-bottom: 1px solid var(--ink-100); font-size: 12px; color: var(--fg2); }
.mk-table tr:last-child td { border-bottom: 0; }
.mk-table .id { font-family: var(--font-mono); font-size: 11px; color: var(--fg3); }
.mk-table .nm { font-weight: var(--w-bold); color: var(--ink-900); }
.mk-cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; }

/* feed */
.mk-feed { padding: 6px 0; }
.mk-feed-item { display: flex; gap: 10px; padding: 9px 13px; }
.mk-feed-item .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: var(--w-black); color: #fff; flex-shrink: 0; }
.mk-feed-item .tx { font-size: 12px; color: var(--fg2); line-height: 1.4; }
.mk-feed-item .tx b { color: var(--ink-900); font-weight: var(--w-bold); }
.mk-feed-item .tm { font-size: 10.5px; color: var(--fg4); margin-top: 2px; }

/* ---------- TABLET / INSPECT ---------- */
.mk-inspect { padding: 16px 18px; height: 100%; background: var(--bg-page); }
.mk-ins-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.mk-ins-head .jt { font-size: 18px; font-weight: var(--w-black); letter-spacing: -.01em; }
.mk-ins-head .meta { font-size: 12px; color: var(--fg4); margin-top: 3px; }
.mk-ins-head .meta .mono { font-family: var(--font-mono); }
.mk-reading { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 9px; display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; }
.mk-reading .pt { font-weight: var(--w-bold); color: var(--ink-900); font-size: 13px; }
.mk-reading .pt .u { color: var(--fg4); font-weight: var(--w-semibold); font-size: 11.5px; }
.mk-reading .rd { font-family: var(--font-mono); font-size: 14px; font-weight: var(--w-bold); color: var(--ink-900); }
.mk-reading .rd .lbl { display: block; font-family: var(--font-sans); font-size: 9.5px; color: var(--fg4); text-transform: uppercase; letter-spacing: .04em; font-weight: var(--w-extrabold); margin-bottom: 1px; }
.mk-ins-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.mk-photo { width: 62px; height: 62px; border-radius: var(--r-sm); border: 1px solid var(--border); background: linear-gradient(135deg,#cfd8e6,#aeb9cf); display: grid; place-items: center; color: #5d6878; position: relative; overflow: hidden; }
.mk-photo svg, .mk-photo i { width: 20px; height: 20px; }
.mk-sign { flex: 1; height: 62px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: #fff; display: flex; align-items: center; padding: 0 14px; }
.mk-sign .sg { font-family: 'Segoe Script','Bradley Hand',cursive; font-size: 26px; color: var(--ink-700); font-style: italic; transform: rotate(-4deg); }
.mk-btn-pass { background: var(--success); color: #fff; border: 0; border-radius: var(--r-sm); padding: 0 20px; height: 62px; font-weight: var(--w-extrabold); font-size: 14px; font-family: var(--font-sans); display: inline-flex; align-items: center; gap: 7px; }
.mk-btn-pass svg, .mk-btn-pass i { width: 17px; height: 17px; }
.mk-offline { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: var(--w-extrabold); color: #b25e22; background: var(--pending-bg); padding: 4px 9px; border-radius: var(--r-pill); }
.mk-offline svg, .mk-offline i { width: 12px; height: 12px; }

/* ---------- QMS APPROVAL ---------- */
.mk-qms { padding: 16px 18px; background: var(--bg-page); height: 100%; }
.mk-doc-head { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-bottom: 12px; }
.mk-doc-head .tag { font-family: var(--font-mono); font-size: 11px; color: var(--acc-qms); font-weight: var(--w-bold); }
.mk-doc-head .dn { font-size: 16px; font-weight: var(--w-black); letter-spacing: -.01em; margin: 4px 0 8px; }
.mk-doc-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--fg3); }
.mk-doc-meta b { color: var(--ink-900); }
.mk-approvers { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.mk-appr-head { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: var(--w-extrabold); display: flex; align-items: center; justify-content: space-between; }
.mk-appr-head .stage { font-size: 11px; color: var(--fg4); font-weight: var(--w-bold); }
.mk-appr { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--ink-100); }
.mk-appr:last-child { border-bottom: 0; }
.mk-appr .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: var(--w-black); color: #fff; flex-shrink: 0; }
.mk-appr .who { flex: 1; }
.mk-appr .who .nm { font-weight: var(--w-bold); font-size: 12.5px; color: var(--ink-900); display: block; }
.mk-appr .who .ro { font-size: 11px; color: var(--fg4); display: block; }
.mk-appr .tm { font-size: 10.5px; color: var(--fg4); font-family: var(--font-mono); text-align: right; }
.mk-appr .ln { width: 2px; }

/* ---------- WEEKLY GRID ---------- */
.mk-uc { padding: 16px 18px; background: var(--bg-page); height: 100%; }
.mk-uc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mk-uc-head h3 { font-size: 16px; font-weight: var(--w-black); color: #2f5a1c; }
.mk-uc-grid { display: grid; grid-template-columns: 1.4fr repeat(7, 1fr); gap: 6px; }
.mk-uc-grid .hd { font-size: 10px; font-weight: var(--w-extrabold); color: var(--fg4); text-transform: uppercase; text-align: center; padding-bottom: 4px; }
.mk-uc-grid .asset { font-size: 11.5px; font-weight: var(--w-bold); color: var(--ink-900); display: flex; align-items: center; gap: 6px; }
.mk-uc-grid .asset i, .mk-uc-grid .asset svg { width: 14px; height: 14px; color: var(--fg4); }
.mk-cell { aspect-ratio: 1; border-radius: var(--r-xs); display: grid; place-items: center; }
.mk-cell.p { background: var(--acc-uc); color: #fff; }
.mk-cell.f { background: var(--danger); color: #fff; }
.mk-cell.n { background: var(--ink-100); }
.mk-cell svg, .mk-cell i { width: 12px; height: 12px; }