/* Monitoring page styles.
   Part 1 neutralises the Bootstrap 3 defaults that would leak into the page.
   Part 2 is the approved "Acu LINK Monitor" mockup stylesheet, scoped under .mon-page.
   Part 3 holds what only the production page needs (pagination, panel controls, docking next to the navbar). */

/* ---- Part 1: Bootstrap resets, scoped ---- */
.mon-page a { color: inherit; text-decoration: none; }
.mon-page a:hover, .mon-page a:focus { color: inherit; text-decoration: none; }
.mon-page label { display: inline-block; max-width: none; margin: 0; font-weight: inherit; }
.mon-page h1, .mon-page h2, .mon-page h3, .mon-page h4 { margin: 0; font-family: inherit; line-height: 1.2; color: inherit; }
.mon-page p { margin: 0; }
.mon-page dl, .mon-page dd { margin: 0; }
.mon-page input, .mon-page select, .mon-page textarea { max-width: none; margin: 0; }
.mon-page table { max-width: none; background-color: transparent; border-spacing: 0; }
.mon-page button { text-transform: none; overflow: visible; background: none; border: 0; padding: 0; cursor: pointer; }
.mon-page .btn { margin: 0; line-height: inherit; text-align: left; white-space: nowrap; }
.mon-page .btn:hover, .mon-page .btn:focus { color: inherit; text-decoration: none; }
.mon-page .btn-primary:hover, .mon-page .btn-primary:focus { color: var(--accent-fg); }
.mon-page .badge { min-width: 0; line-height: inherit; text-align: left; vertical-align: baseline; white-space: nowrap; }
.mon-page .small { font-size: inherit; }

/* ---- Part 2: mockup stylesheet (scoped) ---- */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --gutter: clamp(16px, 4vw, 56px); --bg: #fafaf9; --surface: #ffffff; --sunken: #fafaf9; --line: #e7e5e4; --line-soft: #f5f5f4; --line-strong: #d6d3d1; --text-1: #0c0a09; --text-2: #57534e; --text-3: #78716c; --faint: #a8a29e; --accent: #0c0a09; --accent-fg: #ffffff; --ink-soft: #292524; --green-bg: #f0fdf4; --green-fg: #15803d; --green-dot: #22c55e; --red-bg: #fef2f2; --red-fg: #b91c1c; --red-dot: #ef4444; --amber-bg: #fef3c7; --amber-fg: #a16207; --amber-dot: #f59e0b; --blue-bg: #eff6ff; --blue-fg: #1d4ed8; --blue-dot: #3b82f6; --error: var(--red-fg); --error-solid: var(--red-dot); --error-tint: var(--red-bg); --warn: var(--amber-fg); --warn-line: var(--amber-dot); --ok: var(--green-dot); --run: var(--blue-fg); --shadow-rgb: 12, 10, 9; --overlay: rgba(12, 10, 9, 0.28); --glass-soft: rgba(255, 255, 255, .6); --font-ui: "Inter", system-ui, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --mon-top: 0px; --cw: 1170px; --dock-w: 420px; --pill-ok: #166534; --pill-warn: #854d0e; --pill-run: #1e40af; --pill-info: #57534e; --pill-err: #991b1b; }

.mon-page * { box-sizing: border-box; }
.mon-page [hidden] { display: none !important; }
.mon-page { color: var(--text-1); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.mon-page button, .mon-page input, .mon-page select { font: inherit; color: inherit; }

.mon-page :focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.mon-page .mono { font-family: var(--font-mono); font-size: 12.5px; }

.mon-page .head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 32px; }
.mon-page .head h1 { margin: 0; }
.mon-page .head .sub { font-size: 12.5px; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.mon-page .period { display: inline-flex; align-items: center; gap: 8px; }
.mon-page .period .select { width: auto; min-width: 150px; }

.mon-page .seg { display: inline-flex; background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; }
.mon-page .seg button { padding: 5px 11px; border-radius: 6px; color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.mon-page .seg button[aria-pressed="true"] { background: var(--surface); color: var(--text-1); box-shadow: 0 0 0 1px var(--line-strong); }
.mon-page .seg button:disabled { color: var(--text-3); opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .mon-page .seg button[aria-pressed="false"]:not(:disabled):hover { color: var(--text-1); }
}

.mon-page .readout { display: flex; }
.mon-page .ro { display: grid; gap: 1px; text-align: left; border-right: 1px solid var(--line); transition: background-color 150ms ease, transform 120ms var(--ease-out); }
.mon-page .ro:last-child { border-right: 0; }
.mon-page button.ro:active { background: var(--sunken); transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .mon-page button.ro:hover { background: var(--sunken); }
  
}
.mon-page .ro-k { display: flex; align-items: center; gap: 6px; }
.mon-page .ro-k svg { width: 13px; height: 13px; }
.mon-page .ro--err .ro-k svg { color: var(--red-fg); }
.mon-page .ro--warn .ro-k svg { color: var(--amber-fg); }
.mon-page .ro--ok .ro-k svg { color: var(--green-fg); }

.mon-page .ro--err.is-hot .ro-v { color: var(--error); }
.mon-page .ro--warn.is-hot .ro-v { color: var(--warn); }

.mon-page .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mon-page .head { align-items: center; }

.mon-page .tabs { display: flex; margin-top: 24px; overflow-x: auto; scrollbar-width: none; }
.mon-page .tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.mon-page .tab:active { transform: scale(0.98); }

.mon-page .tab .ico svg { width: 15px; height: 15px; }

.mon-page .site-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11.5px; }
.mon-page .site-foot .mono { font-family: var(--font-mono); }

.mon-page .tab[data-tab="feeds"] .ico svg, .mon-page .tab[data-tab="shipvia"] .ico svg { width: 13.9px; height: 13.9px; }
.mon-page .tab[data-tab="shipvia"] .ico svg { transform: translateY(.7px); }
.mon-page .tab[data-tab="feeds"] .ico svg { transform: translate(-.2px, .7px); }
.mon-page .tab[aria-selected="true"] { font-weight: 500; }

.mon-page .internet-mark { width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--internet-mark) center / contain no-repeat; mask: var(--internet-mark) center / contain no-repeat; --internet-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2096%2096%22%3E%0A%3Cpath%20d%3D%22M38.251%209.482c-40.067%2011.274-39.759%2066.555.429%2077.023%203.157.822%207.446%201.495%209.53%201.495H52V77.2c0-11.691-.582-13.2-5.095-13.2-2.414%200-2.735-.417-3.076-4l-.382-4H52v-8H36v-4c0-3.376.322-4%202.066-4C42.505%2040%2044%2038.228%2044%2032.965V28h4.566c3.772%200%207.455-1.017%209.276-2.561.188-.16.896-1.9%201.573-3.869l1.23-3.578%204.73%203.133C73.436%2026.464%2080%2037.398%2080%2045.485c0%203.16%206.71%209.433%207.603%207.108%201.947-5.076-2.032-20.27-7.305-27.892C71.647%2012.199%2052.817%205.383%2038.251%209.482m-1.382%208.423c-5.683%202.223-10.863%206.088-14.432%2010.767l-2.698%203.537%204.13%204.131L28%2040.471v-3.036C28%2033.655%2029.583%2032%2033.2%2032c2.645%200%202.8-.245%202.8-4.429C36%2021.339%2037.693%2020%2045.571%2020%2051.333%2020%2052%2019.793%2052%2018c0-2.661-8.436-2.714-15.131-.095m-20.46%2024.47c-1.154%203.01.235%2014.032%202.381%2018.883%203.638%208.224%2013.362%2016.084%2022.46%2018.154%204.286.975%204.177-6.578-.12-8.358C37.959%2069.74%2036%2066.353%2036%2062.183c0-3.78-18.546-22.531-19.591-19.808M60%2060.027v19.214l4.555-3.732c2.505-2.053%204.704-3.57%204.885-3.371.182.199%202.013%204.253%204.069%209.01l3.737%208.647%203.627-1.505c1.995-.828%203.939-1.693%204.32-1.922.381-.228-1.081-4.275-3.25-8.991C79.774%2072.66%2078%2068.621%2078%2068.4c0-.22%202.354-.4%205.23-.4h5.23l-9.48-9.572c-5.214-5.265-11.618-11.382-14.23-13.593L60%2040.814v19.213%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E"); }
.mon-page .badge { font-weight: 500; }
.mon-page .dot { border-radius: 50%; display: inline-block; }
.mon-page #panel { margin-top: 16px; }
.mon-page .filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }

.mon-page .chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-2); font-size: 12.5px; white-space: nowrap; transition: transform 120ms var(--ease-out); }
.mon-page .chip:active { transform: scale(0.97); }
.mon-page .chip[aria-pressed="true"] { border-color: var(--text-1); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--text-1); }
@media (hover: hover) and (pointer: fine) {
  .mon-page .chip[aria-pressed="false"]:hover { border-color: var(--line-strong); color: var(--text-1); }
}
.mon-page .chip .n { font-size: 11.5px; color: var(--text-3); }
.mon-page .chip .n.err { color: var(--error); font-weight: 500; }
.mon-page .chip .n.warn { color: var(--warn); font-weight: 500; }
.mon-page .sdot { border-radius: 50%; background: var(--line-strong); flex: none; position: relative; }

.mon-page .search { height: 30px; min-width: 220px; flex: 1; max-width: 360px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 0 10px; font-size: 12.5px; }
.mon-page .select { height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 0 8px; font-size: 12.5px; max-width: 300px; }
.mon-page .scards { flex: 1 1 100%; display: grid; }

.mon-page .scard { display: grid; text-align: left; border: 1px solid var(--line); background: var(--surface); transition: transform 120ms var(--ease-out), border-color 150ms ease; }
.mon-page .scard:active { transform: scale(0.98); }

.mon-page .scard .top { display: flex; align-items: center; justify-content: space-between; }
.mon-page .scard .lbl { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.mon-page .scard .last { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.mon-page .scard .foot { display: flex; justify-content: space-between; color: var(--text-3); }
.mon-page .scard .foot b { font-weight: 500; color: var(--text-1); }

.mon-page .picker { position: relative; }
.mon-page .pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 340px; max-height: 380px; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; padding: 6px; transform-origin: top left; box-shadow: 0 12px 32px rgba(var(--shadow-rgb), 0.12); transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out); }
@starting-style {
  .mon-page .pop { transform: scale(0.97); opacity: 0; }
}
.mon-page .pop input { width: 100%; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); padding: 0 8px; margin-bottom: 4px; font-size: 12.5px; }
.mon-page .opt { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 6px; text-align: left; font-size: 12.5px; }
.mon-page .opt[aria-selected="true"] { background: var(--sunken); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .mon-page .opt:hover { background: var(--sunken); }
}
.mon-page .opt .meta { color: var(--text-3); font-size: 11.5px; }
.mon-page .tcard { margin-top: 18px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.mon-page .thead-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; border-bottom: 1px solid var(--line); }
.mon-page .thead-bar .ttl { display: flex; align-items: baseline; gap: 10px; }
.mon-page .thead-bar h2 { margin: 0; font-size: 13.5px; font-weight: 600; }
.mon-page .thead-bar .count { color: var(--text-3); font-size: 12.5px; }
.mon-page .thead-bar .ttl:empty { display: none; }
.mon-page .thead-bar .right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mon-page .sbtn { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; transition: transform 120ms var(--ease-out); }
.mon-page .sbtn:active { transform: scale(0.97); }
.mon-page .sbtn .n { font-size: 11.5px; color: var(--text-3); }
.mon-page .sbtn .n.err { font-weight: 500; }
.mon-page .sbtn .n.warn { font-weight: 500; }
.mon-page .sbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.mon-page .sbtn[aria-pressed="true"] .n { color: var(--accent-fg); opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .mon-page .sbtn[aria-pressed="false"]:hover { border-color: var(--line-strong); color: var(--text-1); }
}
.mon-page .thead-bar .search { height: 28px; min-width: 200px; max-width: 280px; }
.mon-page .tscroll { overflow: auto; overscroll-behavior: contain; }
.mon-page table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 880px; }
.mon-page th { position: sticky; top: 0; z-index: 3; text-align: left; font-size: 12px; padding: 0; white-space: nowrap; }
.mon-page th .sort { display: flex; align-items: center; gap: 4px; width: 100%; padding: 9px 12px; color: inherit; font-weight: 500; }
.mon-page th.num .sort { justify-content: flex-end; }
.mon-page th .sort .arr { font-size: 9px; color: var(--text-1); }
.mon-page th .sort[aria-sort] { color: var(--text-1); }
@media (hover: hover) and (pointer: fine) {
  .mon-page th .sort:hover { color: var(--text-1); }
  .mon-page th .sort:not([aria-sort]):hover::after { content: "▼"; font-size: 9px; opacity: 0.4; }
}
.mon-page th .plain { display: block; padding: 9px 12px; }
.mon-page td { vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-page tbody tr:last-child td { border-bottom: 0; }
.mon-page td.time, .mon-page td.num { font-family: var(--font-mono); }
.mon-page td.num, .mon-page th.num { text-align: right; }
.mon-page td.msg .m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-page td.msg .e { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; margin-top: 2px; }
.mon-page td .tag { font-size: 12.5px; }
.mon-page td .small { font-size: 12px; }
.mon-page tr.mrow { cursor: pointer; }

.mon-page tr.mrow.is-selected td { background: var(--sunken); }

.mon-page tr.sep td { position: sticky; top: var(--th-h, 37px); z-index: 2; box-shadow: inset 0 -1px 0 var(--line); }
.mon-page tr.more td { text-align: center; color: var(--text-3); font-size: 12px; padding: 14px; }
.mon-page .empty { padding: 36px 16px; text-align: center; color: var(--text-3); white-space: normal; }
.mon-page .empty b { display: block; color: var(--text-1); font-weight: 500; margin-bottom: 4px; }
.mon-page .tfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.mon-page .tnav { display: flex; align-items: center; margin-left: auto; }
.mon-page .dpick { position: relative; }
.mon-page .dp-btn { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text-3); font-size: 11.5px; font-weight: 500; transition: transform 120ms var(--ease-out); }
.mon-page .dp-btn span { color: var(--text-1); font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; }
.mon-page .dp-btn:active { transform: scale(.97); }
.mon-page .dp-btn[aria-expanded="true"] { border-color: var(--faint); }
@media (hover: hover) and (pointer: fine) {
  .mon-page .dp-btn:hover { border-color: var(--faint); }
}
.mon-page .dp-pop { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30; width: 236px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .14); transform-origin: bottom right; transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out); }
@starting-style {
  .mon-page .dp-pop { transform: scale(.97); opacity: 0; }
}
.mon-page .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mon-page .dp-title { font-size: 12.5px; font-weight: 600; color: var(--text-1); }
.mon-page .dp-nav { width: 24px; height: 24px; border-radius: 6px; color: var(--text-2); font-size: 14px; }
.mon-page .dp-nav:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .mon-page .dp-nav:not(:disabled):hover { background: var(--sunken); }
}
.mon-page .dp-dow, .mon-page .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mon-page .dp-dow span { text-align: center; font-size: 10px; font-weight: 500; color: var(--faint); padding: 2px 0 4px; letter-spacing: .04em; }
.mon-page .dp-day { position: relative; height: 28px; border-radius: 6px; font-size: 12px; font-family: var(--font-mono); color: var(--text-1); font-weight: 500; transition: transform 120ms var(--ease-out); }
.mon-page .dp-day:disabled { color: var(--faint); font-weight: 400; opacity: .55; cursor: default; }
.mon-page .dp-day.is-today:not(.is-cur) { box-shadow: inset 0 0 0 1px var(--line-strong); }
.mon-page .dp-day.is-cur { background: var(--accent); color: var(--accent-fg); }
.mon-page .dp-day:not(:disabled):active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .mon-page .dp-day:not(:disabled):not(.is-cur):hover { background: var(--sunken); }
}
.mon-page .dp-day:focus-visible { outline: 2px solid var(--text-1); outline-offset: 1px; }
.mon-page .dp-err { position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--red-dot); }
.mon-page .dp-day.is-cur .dp-err { background: var(--accent-fg); }
.mon-page .dp-day.in-sel { background: var(--sunken); border-radius: 0; }
.mon-page .dp-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--text-3); justify-content: space-between; }

.mon-page .dp-foot span { display: inline-flex; align-items: center; gap: 6px; }
.mon-page .dp-foot .dp-err { position: static; margin: 0; }

.mon-page .sgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

@media (max-width: 720px) {
  .mon-page .tnav { display: none; }
  .mon-page .tfoot { flex-wrap: wrap; }
}
.mon-page .icon-btn { width: 28px; height: 28px; border: 1px solid var(--line); display: grid; place-items: center; transition: transform 120ms var(--ease-out); }
.mon-page .icon-btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .mon-page .icon-btn:hover { color: var(--text-1); border-color: var(--line-strong); }
}
.mon-page .tcard.full { position: fixed; inset: 12px; z-index: 45; margin: 0; box-shadow: 0 24px 64px rgba(var(--shadow-rgb), 0.25); transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
@starting-style {
  .mon-page .tcard.full { transform: scale(0.985); opacity: 0; }
}
.mon-page .tcard.full .tscroll { flex: 1; }
.mon-page .full-back { position: fixed; inset: 0; z-index: 44; background: var(--overlay); }

.mon-page .pill { display: inline-flex; align-items: center; white-space: nowrap; user-select: none; -webkit-user-select: none; transition: transform 120ms var(--ease-out); }
.mon-page .pill svg { width: 11px; height: 11px; flex: none; }

.mon-page .pill.ok svg { color: var(--ok); }
.mon-page .pill.run { color: var(--run); box-shadow: inset 0 0 0 1px var(--run); }

.mon-page .pill.progress { color: var(--run); box-shadow: inset 0 0 0 1px var(--run); }
.mon-page .pill[data-pill] { cursor: default; user-select: none; -webkit-user-select: none; }
.mon-page .pill[data-resolve] { cursor: pointer; transition: transform .12s var(--ease-out); }
.mon-page .pill[data-resolve]:active { transform: scale(.95); }
.mon-page .btn { height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); background: var(--surface); display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; text-decoration: none; transition: transform 120ms var(--ease-out); }
.mon-page .btn:active { transform: scale(0.97); }
.mon-page .btn:disabled { opacity: 0.45; cursor: not-allowed; }

.mon-page .drawer-back { position: fixed; inset: 0; background: var(--overlay); z-index: 40; transition: opacity 200ms var(--ease-out); }
.mon-page .drawer { position: fixed; right: 0; bottom: 0; width: min(480px, 100%); z-index: 41; border-left: 1px solid var(--line); display: flex; flex-direction: column; transition: transform 220ms var(--ease-out); }
@starting-style {
  .mon-page .drawer { transform: translateX(24px); }
  .mon-page .drawer-back { opacity: 0; }
}
.mon-page .drawer.leaving { transform: translateX(24px); opacity: 0; transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out); }
.mon-page .drawer-back.leaving { opacity: 0; transition-duration: 140ms; }
.mon-page .d-head { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.mon-page .d-head .t { flex: 1; min-width: 0; }

.mon-page .d-head h3 { margin: 4px 0 8px; font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }
.mon-page .d-body { padding: 18px 20px 28px; overflow-y: auto; display: grid; gap: 20px; align-content: start; }
.mon-page .d-sec h4 { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.mon-page .code { font-family: var(--font-ui); border: 1px solid var(--line); padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow-y: auto; }
.mon-page .code.err { color: var(--error); }
.mon-page .kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 13px; }
.mon-page .kv dt { color: var(--text-3); }
.mon-page .kv dd { margin: 0; overflow-wrap: anywhere; }
.mon-page .kv dd.m { font-family: var(--font-mono); font-size: 12px; }
.mon-page .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mon-page .close { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); border: 1px solid var(--line); flex: none; transition: transform 120ms var(--ease-out); }
.mon-page .close:active { transform: scale(0.95); }
.mon-page .stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mon-page .stage { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; display: grid; gap: 4px; }
.mon-page .stage .nm { font-weight: 500; text-transform: capitalize; }
.mon-page .stage .sm { color: var(--text-3); font-family: var(--font-mono); font-size: 11.5px; }
.mon-page .day-h { font-size: 12px; font-weight: 500; color: var(--text-3); }
.mon-page .err-item { display: grid; gap: 2px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 6px; }
@media (hover: hover) and (pointer: fine) {
  .mon-page .err-item:hover { border-color: var(--line-strong); background: var(--sunken); }
}
.mon-page .err-item .top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-3); }
.mon-page .err-item .msg { font-size: 13px; overflow-wrap: anywhere; }
.mon-page .err-item .go { font-size: 12px; color: var(--text-2); }
.mon-page .err-item.is-solved { opacity: .55; }

.mon-page .pw { position: relative; }
.mon-page .eye { position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); }
.mon-page .eye[aria-pressed="true"] { color: var(--text-1); }
.mon-page .toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 9px 14px; font-size: 13px; z-index: 70; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
@starting-style {
  .mon-page .toast { transform: translate(-50%, 8px); opacity: 0; }
}
.mon-page .toast.leaving { opacity: 0; transform: translate(-50%, 4px); transition-duration: 150ms; }
.mon-page .note { margin-top: 18px; font-size: 12px; color: var(--text-3); border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 720px) {
  .mon-page .readout { width: 100%; }
  .mon-page .ro { flex: 1; min-width: 0; padding: 8px 10px; }

  .mon-page .search, .mon-page .thead-bar .search { min-width: 0; max-width: none; width: 100%; flex: 1 1 100%; }

  .mon-page .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mon-page .pop { width: min(340px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .mon-page .drawer, .mon-page .drawer.leaving { transition: opacity 150ms ease; }
  @starting-style {
    .mon-page .drawer { transform: none; opacity: 0; }
  }
  .mon-page .chip:active, .mon-page .btn:active, .mon-page .pill[data-resolve]:active, .mon-page .close:active, .mon-page .tab:active, .mon-page .scard:active, .mon-page .sbtn:active { transform: none; }
  .mon-page .sdot.run::after { animation: none; }
}

:root[data-theme="dark"] { --bg: #121212; --surface: #1e1e1e; --sunken: #232323; --line: rgba(255, 255, 255, .07); --line-soft: #1c1c1c; --line-strong: rgba(255, 255, 255, .12); --text-1: #e4e4e4; --text-2: rgba(255, 255, 255, .6); --text-3: rgba(255, 255, 255, .5); --faint: rgba(255, 255, 255, .38); --accent: #e4e4e4; --accent-fg: #121212; --ink-soft: #f2f2f2; --green-bg: rgba(74, 222, 128, .15); --green-fg: #4ade80; --green-dot: #4ade80; --red-bg: rgba(248, 113, 113, .15); --red-fg: #f87171; --red-dot: #f87171; --amber-bg: rgba(252, 211, 77, .15); --amber-fg: #fcd34d; --amber-dot: #fcd34d; --blue-bg: rgba(96, 165, 250, .15); --blue-fg: #60a5fa; --blue-dot: #60a5fa; --shadow-rgb: 0, 0, 0; --overlay: rgba(0, 0, 0, .55); --glass-soft: rgba(30, 30, 30, .6); --error: var(--red-fg); --error-solid: var(--red-dot); --error-tint: var(--red-bg); --warn: var(--amber-fg); --warn-line: var(--amber-dot); --ok: var(--green-dot); --run: var(--blue-fg); color-scheme: dark; --pill-ok: var(--green-fg); --pill-warn: var(--amber-fg); --pill-run: var(--blue-fg); --pill-info: var(--text-3); --pill-err: var(--red-fg); }
.mon-page { font-size: 13px; line-height: 1.4; }

.mon-page .head h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.mon-page .head .sub { color: var(--text-3); }

.mon-page .ro { padding: 9px 14px; min-width: 118px; }
.mon-page .ro-k { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.mon-page .ro-v { font-family: var(--font-ui); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin-top: 3px; }

.mon-page .tabs { position: relative; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; gap: 2px; }
.mon-page .tab { position: relative; z-index: 1; height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid transparent; font-weight: 500; font-size: 12.5px; color: var(--text-2); transition: background-color .16s ease, color .16s ease, transform 120ms var(--ease-out); }
.mon-page .tab[aria-selected="true"] { background: transparent; box-shadow: none; color: var(--text-1); }
.mon-page .tab .ico { color: var(--faint); }
.mon-page .tab[aria-selected="true"] .ico { color: var(--text-1); }
@media (hover: hover) and (pointer: fine) {
  .mon-page .tab[aria-selected="false"]:hover { color: var(--text-1); background: var(--glass-soft); }
}
.mon-page .tab-pill { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .06); transition: transform 180ms var(--ease-in-out), width 180ms var(--ease-in-out); }
.mon-page .tab-pill.no-anim { transition: none; }
.mon-page .tab { flex: 1 1 0; min-width: max-content; }
@media (max-width: 720px) {
  .mon-page .tab { flex: none; }
}
.mon-page .badge { border-radius: 999px; padding: 1px 7px; font-size: 10.5px; background: var(--red-bg); color: var(--red-fg); }
.mon-page .dot { background: var(--red-dot); width: 6px; height: 6px; }
.mon-page .scard { border-color: var(--line); }
.mon-page .scard .top { font-weight: 600; }
.mon-page .scard.off { opacity: .55; }
.mon-page .scard .csub { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -1px; }
.mon-page .scard[aria-pressed="true"] .csub { color: inherit; opacity: .7; }
.mon-page .scard { min-width: 0; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.mon-page .scard .foot { min-width: 0; }
.mon-page .scard .foot > span { white-space: nowrap; }
.mon-page .scard .top > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-page .scard .top .sdot { flex: none; }

.mon-page .scard .foot b { font-family: var(--font-mono); }
.mon-page .scard .foot b.err { color: var(--red-fg); }
.mon-page .scard .foot b.warn { color: var(--amber-fg); }
@media (hover: hover) and (pointer: fine) {
  .mon-page .scard[aria-pressed="false"]:hover { border-color: var(--faint); }
}
.mon-page .scard[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); box-shadow: none; }
.mon-page .scard[aria-pressed="true"] .foot, .mon-page .scard[aria-pressed="true"] .foot b { color: inherit; }
.mon-page .sdot { width: 6px; height: 6px; }
.mon-page .sdot.ok { background: var(--green-dot); }
.mon-page .sdot.err { background: var(--red-dot); }
.mon-page .sdot.warn { background: var(--amber-dot); }
.mon-page .sdot.run { background: var(--blue-dot); }
@keyframes ripple { from { transform: scale(1); opacity: .6; } to { transform: scale(2.5); opacity: 0; } }
.mon-page .chip, .mon-page .sbtn{ border-radius: 7px; font-weight: 500; font-size: 12.5px; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); }
.mon-page .chip[aria-pressed="true"], .mon-page .sbtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .mon-page .chip[aria-pressed="false"]:hover, .mon-page .sbtn[aria-pressed="false"]:hover { border-color: var(--faint); }
}
.mon-page .sbtn .n { font-family: var(--font-mono); }
.mon-page .sbtn .n.err { color: var(--red-fg); }
.mon-page .sbtn .n.warn { color: var(--amber-fg); }
.mon-page .btn { border-radius: 7px; font-weight: 500; color: var(--text-2); border-color: var(--line); }
.mon-page .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .mon-page .btn:not(:disabled):hover { border-color: var(--faint); }
  .mon-page .btn-primary:hover { background: var(--ink-soft); }
}
.mon-page .select, .mon-page .search, .mon-page .field { border-radius: 7px; border-color: var(--line); background: var(--surface); }
.mon-page .icon-btn { border-radius: 7px; color: var(--faint); background: var(--surface); }
.mon-page .pill { border-radius: 999px; height: auto; padding: 2px 9px 2px 7px; font-size: 11px; font-weight: 500; box-shadow: none; }
.mon-page .pill .pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mon-page .pill.error { background: var(--red-bg); }
.mon-page .pill.error .pill-dot { background: var(--red-dot); }
.mon-page .pill.warn { background: var(--amber-bg); box-shadow: none; }
.mon-page .pill.warn .pill-dot { background: var(--amber-dot); }
.mon-page .pill.ok { background: var(--green-bg); color: var(--green-fg); padding-left: 7px; }
.mon-page .pill.ok .pill-dot { background: var(--green-dot); }
.mon-page .pill.run, .mon-page .pill.progress { background: var(--blue-bg); box-shadow: none; }
.mon-page .pill.run .pill-dot, .mon-page .pill.progress .pill-dot { background: var(--blue-dot); }
.mon-page .pill.info { background: var(--sunken); box-shadow: none; }
.mon-page .pill.info .pill-dot { background: var(--faint); }
.mon-page .pill.solved { background: var(--green-bg); color: var(--green-fg); }
.mon-page .pill.solved .pill-dot { background: var(--green-dot); }
.mon-page th, .mon-page th.num { text-align: center; }
.mon-page th .sort, .mon-page th.num .sort { justify-content: center; }
.mon-page th .plain { text-align: center; }
.mon-page td:not(.msg) { text-align: center; }
.mon-page tr.sep td { text-align: left; }
.mon-page td.num { text-align: center; }
.mon-page .tcard { border-radius: 12px; border-color: var(--line); }
.mon-page .thead-bar { padding: 12px 18px; }
.mon-page table { font-size: 12.5px; }
.mon-page th { background: var(--sunken); color: var(--text-3); font-weight: 500; border-bottom: 1px solid var(--line); }

.mon-page td { border-bottom: 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.mon-page td.time, .mon-page td.num { font-size: 11.5px; }
.mon-page tr.mrow.lv-error td { background: transparent; }
.mon-page tr.mrow.lv-error td:first-child { box-shadow: inset 2px 0 0 var(--red-dot); }
.mon-page tr.mrow.lv-warn td:first-child { box-shadow: inset 2px 0 0 var(--amber-dot); }
.mon-page tr.mrow.lv-progress td:first-child { box-shadow: inset 2px 0 0 var(--blue-dot); }
@media (hover: hover) and (pointer: fine) {
  .mon-page tr.mrow:hover td { background: var(--sunken); }
}
.mon-page tr.sep td { background: var(--surface); color: var(--faint); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; padding: 8px 16px 6px; border-top: 1px solid var(--line); }

.mon-page .tfoot { background: var(--sunken); padding: 9px 18px; font-size: 11px; color: var(--text-3); }

.mon-page #title { cursor: default; user-select: none; -webkit-user-select: none; display: inline-block; transition: transform 120ms var(--ease-out); --sx: -999px; --tbase: var(--text-1); --scan: color-mix(in srgb, var(--green-fg) 60%, var(--tbase)); }
.mon-page #title:active { transform: scale(0.98); }
.mon-page #snap { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: theme-reveal .5s ease both; }
@keyframes theme-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(var(--vt-r, 150%) at var(--vt-x, 50%) var(--vt-y, 50%)); } }
.mon-page .ro-wrap { position: relative; }
.mon-page .ro-v-text { font-size: 14px; line-height: 1.55; margin-top: 5px; white-space: nowrap; }
.mon-page .pcaret { font-size: 11px; color: var(--text-3); margin-left: 2px; }
.mon-page .ro--period .ro-k svg { color: var(--text-3); }
.mon-page .ro--period[aria-expanded="true"] { background: var(--sunken); }
.mon-page .pmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 35; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .12); transform-origin: top left; transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out); }
@starting-style {
  .mon-page .pmenu { transform: scale(0.97); opacity: 0; }
}
.mon-page .pm-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; color: var(--text-1); text-align: left; }
.mon-page .pm-item[aria-checked="true"] { font-weight: 600; }
.mon-page .pm-item:disabled { color: var(--faint); cursor: not-allowed; }
.mon-page .pm-check { color: var(--text-1); }
@media (hover: hover) and (pointer: fine) {
  .mon-page .pm-item:not(:disabled):hover { background: var(--sunken); }
}
.mon-page .pm-item:focus-visible { outline: none; background: var(--sunken); }
@media (max-width: 720px) {
  .mon-page .ro-wrap { width: 100%; }
  .mon-page .readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mon-page .ro { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .mon-page .ro:nth-child(2n) { border-right: 0; }
  .mon-page .ro:nth-child(n+3) { border-bottom: 0; }
  .mon-page .ro-v-text { font-size: 15px; }
}
.mon-page .sbox { display: inline-flex; align-items: center; gap: 8px; height: 30px; width: 30px; padding: 0 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text-3); cursor: text; transition: width 200ms var(--ease-out), border-color 150ms ease; padding-left: 6.5px; }
.mon-page .sbox svg { flex: none; }
.mon-page .sbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--text-1); opacity: 0; transition: opacity 120ms ease; }
.mon-page .sbox .sclear { flex: none; width: 18px; height: 18px; border-radius: 4px; display: none; place-items: center; color: var(--faint); font-size: 11px; }
.mon-page .sbox:focus-within, .mon-page .sbox.has-text { width: 260px; border-color: var(--faint); }
.mon-page .sbox:focus-within input, .mon-page .sbox.has-text input { opacity: 1; }
.mon-page .sbox.has-text .sclear { display: grid; }
@media (hover: hover) and (pointer: fine) {
  .mon-page .sbox:hover { width: 260px; transition-delay: 120ms; }
  .mon-page .sbox:hover input { transition-delay: 120ms; opacity: 1; }
  .mon-page .sbox:focus-within, .mon-page .sbox.has-text { transition-delay: 0ms; }
  
  .mon-page .sclear:hover { color: var(--text-2); background: var(--line-soft); }
}
@media (max-width: 720px) {
  .mon-page .sbox:focus-within, .mon-page .sbox.has-text { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mon-page .sbox, .mon-page .sbox input { transition: none; }
}

.mon-page .tcard { position: relative; }

.mon-page td { color: var(--text-1); }
.mon-page td.time, .mon-page td.num { color: var(--text-2); }
.mon-page td .tag { color: var(--text-1); font-weight: 500; }
.mon-page td .small { color: var(--text-3); }
.mon-page td.msg .m, .mon-page td.msg .e { font-family: var(--font-ui); font-size: 13px; }
.mon-page td.msg .m { color: var(--text-1); }
.mon-page tr.lv-error td.msg .m, .mon-page tr.lv-warn td.msg .m, .mon-page tr.lv-progress td.msg .m { color: var(--text-1); }
.mon-page td.msg .e { color: var(--red-fg); }
.mon-page td .http-bad { color: var(--red-fg); font-weight: 500; }
.mon-page tr.lv-solved td, .mon-page tr.lv-solved td .tag, .mon-page tr.lv-solved td.msg .m, .mon-page tr.lv-solved td.msg .e { color: var(--text-3); font-weight: 400; }
.mon-page .code-wrap { position: relative; }

.mon-page .code-copy { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); transition: transform 120ms var(--ease-out); }
.mon-page .code-copy:active { transform: scale(.94); }
.mon-page .code-copy.is-done { color: var(--green-fg); }

.mon-page .kv-copy { position: static; flex: none; width: 24px; height: 24px; margin-top: -4px; }
@media (hover: hover) and (pointer: fine) {
  .mon-page .code-copy:hover { color: var(--text-1); border-color: var(--faint); }
}

.mon-page .drawer.docked { width: var(--dock-w); z-index: 30; box-shadow: none; transition: transform 360ms var(--ease-drawer), opacity 260ms ease-out; }
@starting-style {
  .mon-page .drawer.docked { transform: translateX(100%); opacity: 0; }
}
.mon-page .drawer.docked.leaving { transform: translateX(100%); opacity: 0; transition: transform 240ms var(--ease-drawer), opacity 200ms ease-in; }
.mon-page tr.mrow.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--text-1); }
.mon-page .drawer .d-head { display: block; position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 14px 18px 14px; border-bottom: 1px solid var(--line); }
.mon-page .d-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mon-page .d-tab { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.mon-page .d-tools { display: flex; align-items: center; gap: 10px; }
.mon-page .d-step { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--surface); }
.mon-page .d-step button { width: 28px; height: 24px; display: grid; place-items: center; color: var(--text-2); transition: transform 120ms var(--ease-out); }
.mon-page .d-step button + button { border-left: 1px solid var(--line); }
.mon-page .d-step button:active { transform: scale(.92); }
.mon-page .d-close { position: relative; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); transition: transform 120ms var(--ease-out); }
.mon-page .d-close:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .mon-page .d-step button:hover { background: var(--sunken); color: var(--text-1); }
  .mon-page .d-close:hover { background: var(--sunken); color: var(--text-1); }
}
.mon-page .drawer .d-head h3 { margin: 8px 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
.mon-page .d-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--text-2); }
.mon-page .d-sub .mono { font-size: 11.5px; color: var(--text-3); }
.mon-page .d-when { margin-top: 6px; font-size: 11.5px; color: var(--text-3); }
.mon-page .drawer .d-body { padding: 16px 18px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.mon-page .drawer .d-sec h4 { margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.mon-page .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mon-page .fact { display: grid; gap: 3px; padding: 9px 12px; background: var(--surface); min-width: 0; }
.mon-page .fact.wide { grid-column: 1 / -1; }
.mon-page .fk { font-size: 11px; color: var(--text-3); }
.mon-page .fv { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-1); overflow-wrap: anywhere; min-width: 0; }
.mon-page .fv.mono { font-family: var(--font-mono); font-size: 12px; }
.mon-page .fv.bad { color: var(--red-fg); font-weight: 500; }

.mon-page .fv .kv-copy { margin: -3px 0 0 auto; }
.mon-page .d-links { display: flex; gap: 8px; }

.mon-page .d-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--sunken); }
.mon-page .d-foot .btn { height: 28px; font-size: 12px; }
.mon-page .d-note { margin: 0; font-size: 12.5px; color: var(--text-3); }
.mon-page .note-box { display: block; width: 100%; min-height: 76px; max-height: 280px; resize: vertical; margin: 0; padding: 10px 12px; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--text-1); background: var(--sunken); border: 1px solid var(--line); border-radius: 7px; outline: 0; transition: border-color 150ms ease; }
.mon-page .note-box::placeholder { color: var(--faint); }
.mon-page .note-box:focus { border-color: var(--faint); }
@media (hover: hover) and (pointer: fine) {
  .mon-page .note-box:hover { border-color: var(--line-strong); }
  .mon-page .note-box:focus { border-color: var(--faint); }
}
.mon-page .drawer .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mon-page .stage .pill { justify-self: start; }
.mon-page .thead-bar .sbtn { height: 30px; }
.mon-page .thead-bar .sbox svg, .mon-page .thead-bar .icon-btn svg { width: 15px; height: 15px; stroke-width: 2.6; }
.mon-page .thead-bar .dp-btn svg { width: 15px; height: 15px; stroke-width: 1.75; }
.mon-page .thead-bar .sbox, .mon-page .thead-bar .dp-btn, .mon-page .thead-bar .icon-btn { color: var(--text-3); }
@media (max-width: 720px) {
  .mon-page .thead-bar { flex-wrap: nowrap; align-items: center; }
  .mon-page .thead-bar .ttl { display: none; }
  .mon-page .thead-bar .sgroup { flex: 1 1 auto; min-width: 0; }
  .mon-page .thead-bar .right { width: auto; flex: none; margin-left: auto; flex-wrap: nowrap; gap: 6px; }
  .mon-page .thead-bar .sbtn, .mon-page .thead-bar .icon-btn, .mon-page .thead-bar .dp-btn, .mon-page .thead-bar .sbox { width: auto; min-width: 30px; height: 30px; }
  
  .mon-page .thead-bar .sbox:not(:focus-within):not(.has-text) { width: 30px; }
  .mon-page .thead-bar .sbox:focus-within, .mon-page .thead-bar .sbox.has-text { width: 160px; }
}
.mon-page .drawer { background: var(--surface); }
.mon-page .code { background: var(--sunken); border-color: var(--line); border-radius: 7px; font-size: 13px; }
.mon-page .toast { background: var(--accent); color: var(--accent-fg); border-radius: 7px; }
@media (prefers-reduced-motion: reduce) {
  .mon-page .tab-pill { transition: none; }
  @starting-style {
    .mon-page .drawer.docked { transform: none; }
  }
  .mon-page .drawer.docked.leaving { transform: none; }
  @starting-style {
    .mon-page .tcard.full { transform: none; }
    .mon-page .toast { transform: translateX(-50%); }
  }
  .mon-page .toast.leaving { transform: translateX(-50%); }
  .mon-page button.ro:active { transform: none; }
  .mon-page .sdot.run::after, .mon-page .sdot.run::before { animation: none; opacity: 0; }
}
.mon-page .head-id { position: relative; min-width: 0; padding-bottom: 6px; }
.mon-page .head-id > :not(.ekg) { position: relative; z-index: 1; }
.mon-page .ekg { position: absolute; z-index: 0; left: -6px; bottom: -14px; width: min(520px, calc(100vw - 2 * var(--gutter))); height: 60px; pointer-events: none; opacity: .5; transition: opacity 400ms ease; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 88%, transparent 100%); }
.mon-page .head .sub { display: none; }

.mon-page .head-id h1 { width: fit-content; }

.mon-page #title.is-flat { --scan: color-mix(in srgb, var(--red-fg) 65%, var(--tbase)); }
.mon-page #title { background: linear-gradient(90deg, var(--tbase) calc(var(--sx) - 46px), var(--scan) var(--sx), var(--tbase) calc(var(--sx) + 46px)); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .mon-page #title { --scan: color-mix(in srgb, var(--green-dot) 55%, var(--tbase)); }
:root[data-theme="dark"] .mon-page #title.is-flat { --scan: color-mix(in srgb, var(--red-dot) 60%, var(--tbase)); }

.mon-page .ekg.flat { opacity: .35; }
:root[data-theme="dark"] .mon-page .ekg.flat { opacity: .6; }
:root[data-theme="dark"] .mon-page .ekg:not(.flat) { opacity: .7; }
@media (max-width: 720px) {
  
  .mon-page .thead-bar .dpick { flex: none; }
  .mon-page .thead-bar .dp-btn { justify-content: flex-start; width: 30px; height: 30px; padding: 0 8px; gap: 8px; overflow: hidden; white-space: nowrap; transition: width 200ms var(--ease-out), border-color 150ms ease, transform 120ms var(--ease-out); padding-left: 6.5px; }
  .mon-page .thead-bar .dp-btn svg { flex: none; }
  
  .mon-page .thead-bar .dp-btn span { opacity: 0; transition: opacity 120ms ease; }
  .mon-page .thead-bar .dp-btn:focus-visible, .mon-page .thead-bar .dp-btn[aria-expanded="true"] { width: 126px; border-color: var(--faint); }
  .mon-page .thead-bar .dp-btn:focus-visible span, .mon-page .thead-bar .dp-btn[aria-expanded="true"] span { opacity: 1; }
  .mon-page .thead-bar .dp-pop { top: calc(100% + 8px); bottom: auto; right: 0; transform-origin: top right; }
  .mon-page .thead-bar .icon-btn { flex: none; width: 30px; height: 30px; }
}
@media (max-width: 720px) and (hover: hover) and (pointer: fine) {
  .mon-page .thead-bar .dp-btn:hover { width: 126px; border-color: var(--faint); transition-delay: 120ms, 0ms, 0ms; }
  .mon-page .thead-bar .dp-btn:hover span { opacity: 1; transition-delay: 120ms; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .mon-page .thead-bar .dp-btn, .mon-page .thead-bar .dp-btn span { transition: none; }
}
.mon-page .web-btn { text-decoration: none; }
.mon-page .thead-bar .web-btn { height: 30px; }
.mon-page .web-btn .internet-mark { display: block; flex: none; }
.mon-page .web-btn span { font-family: var(--font-ui); font-weight: 500; }
@media (max-width: 720px) {
  .mon-page .thead-bar .web-btn:focus-visible { width: 96px; }
}
@media (max-width: 720px) and (hover: hover) and (pointer: fine) {
  .mon-page .thead-bar .web-btn:hover { width: 96px; }
}
.mon-page .sbtn .si { display: block; flex: none; color: var(--text-3); }
.mon-page .sbtn[aria-pressed="false"] .si-error { color: var(--red-fg, var(--error)); }
.mon-page .sbtn[aria-pressed="false"] .si-warn { color: var(--amber-fg, var(--warn)); }
.mon-page .sbtn[aria-pressed="false"] .si-solved { color: var(--green-fg, var(--ok)); }
.mon-page .sbtn[aria-pressed="true"] .si { color: inherit; }
@media (max-width: 720px) {
  .mon-page .sbtn { height: 30px; min-width: 30px; padding: 0 7px; gap: 0; justify-content: center; transition: transform 120ms var(--ease-out), border-color 150ms ease, background-color 150ms ease; }
  .mon-page .sbtn .sl { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 200ms var(--ease-out), opacity 120ms ease, margin 200ms var(--ease-out); }
  .mon-page .sbtn[aria-pressed="true"] .sl { max-width: 90px; opacity: 1; margin-left: 6px; }
  .mon-page .sgroup { gap: 6px; flex-wrap: nowrap; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .mon-page .sbtn, .mon-page .sbtn .sl { transition: none; }
}

/* ---- Part 3: production glue ---- */

body { background: var(--bg); color: var(--text-1); }
hr { border-top-color: var(--line); }
body > .container footer, body > .container footer p { color: var(--text-3); }
.mon-page { padding-block: 22px 8px; background: transparent; }
.mon-page .filters:empty { display: none; }

/* The container is a Bootstrap .container, not the mockup's .shell: when the details panel is docked, shift it. */
body.has-dock .container.body-content {
  width: auto;
  max-width: var(--cw);
  margin-right: var(--dock-w);
  margin-left: max(0px, min((100% - var(--cw)) / 2, 100% - var(--dock-w) - var(--cw)));
}
.mon-page .drawer { top: var(--mon-top); }
.mon-page .drawer-back { top: var(--mon-top); }
.mon-page .tcard.full { top: calc(var(--mon-top) + 12px); }
.mon-page .full-back { top: var(--mon-top); }

/* Header: readout plus refresh */
.mon-page .head-tools { display: flex; align-items: center; gap: 10px; }
@media (max-width: 720px) { .mon-page .head-tools { width: 100%; } .mon-page .head-tools .ro-wrap { flex: 1; min-width: 0; } }

/* Custom range inside the period menu */

.mon-page .pmenu .pm-item[data-reset] { border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: 4px; color: var(--text-2); }

/* Table footer: showing / pages / page size / dates / full screen */
.mon-page .tfoot { flex-wrap: wrap; }
.mon-page .tpager { display: flex; align-items: center; gap: 3px; margin-inline: auto; }
.mon-page .page-btn { min-width: 34px; height: 24px; padding: 0 4px; text-align: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text-2); font-family: var(--font-mono); font-size: 11.5px; }
.mon-page .page-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.mon-page .page-btn:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .mon-page .page-btn:not(.active):not(:disabled):hover { border-color: var(--faint); color: var(--text-1); } }
.mon-page .page-dots { min-width: 34px; padding: 0; text-align: center; color: var(--faint); }

.mon-page .tnav { gap: 8px; }

/* Table cells and panel pieces that only production has */

.mon-page .d-sec .d-note { margin-top: 6px; }
.mon-page .d-note.is-saved { color: var(--green-fg); }
.mon-page .req { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.mon-page .req .top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mon-page .req .when { margin-left: auto; font-family: var(--font-mono); }
.mon-page .req-err { margin-top: 3px; font-size: 12px; color: var(--red-fg); overflow-wrap: anywhere; }
.mon-page .err-item .msg.detail { font-family: var(--font-ui); font-size: 13px; color: var(--text-3); white-space: pre-wrap; }
.mon-page .scard .foot .when { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.mon-page .scard[aria-pressed="true"] .foot .when { color: inherit; opacity: .7; }
.mon-page a.scard, .mon-page a.sbtn { text-decoration: none; }
.mon-page a.scard:hover, .mon-page a.sbtn:hover { color: inherit; }
.mon-page .scard[aria-pressed="true"]:hover, .mon-page .scard[aria-pressed="true"]:focus { color: var(--accent-fg); }
.mon-page .sbtn[aria-pressed="true"]:hover, .mon-page .sbtn[aria-pressed="true"]:focus { color: var(--accent-fg); }

/* Layout glue */

.mon-page .tab .dot[id], .mon-page .tab .badge[id] { margin-left: 2px; }

.mon-page .tab .ico { width: 15px; height: 15px; display: inline-grid; place-items: center; flex: none; }

/* The list behind the Errors / Warnings counters shows a preview; the full text is in the table row. */
.mon-page .err-item .msg { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mon-page .err-item .msg.detail { -webkit-line-clamp: 2; }

/* Compact source cards: one tight block per source */
.mon-page .scards { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; }
.mon-page .scard { padding: 6px 10px 7px; gap: 0; border-radius: 8px; }
.mon-page .scard .top { font-size: 12px; gap: 6px; line-height: 1.25; }
.mon-page .scard .csub { display: none; }
.mon-page .scard .foot { margin-top: 3px; gap: 6px; font-size: 10.5px; line-height: 1.25; }
.mon-page .scard .foot b { font-size: 11px; }
.mon-page .filters { margin-top: 12px; }
.mon-page #monTable .tcard { margin-top: 12px; }
@media (max-width: 720px) { .mon-page .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The page has its own footer line; the layout's generic one would repeat it. */
body > .container.body-content > hr, body > .container.body-content > footer { display: none; }

/* Change-status dialog (5 clicks on a Boomi status pill) */
.mon-page .pw-overlay {
  position: absolute; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .19s ease; user-select: none; -webkit-user-select: none;
}
.mon-page .pw-overlay.open { opacity: 1; transition: opacity .2s ease; }
.mon-page .pw-overlay input { user-select: text; -webkit-user-select: text; }
.mon-page .pw-dialog {
  width: 380px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(var(--shadow-rgb), .18); padding: 14px 16px;
  opacity: 0; filter: blur(10px); transform: perspective(500px) translateZ(-100px) rotateX(5deg) rotateY(25deg);
  transition: opacity .3s cubic-bezier(.67, .17, .62, .64), filter .3s cubic-bezier(.67, .17, .62, .64), transform .3s cubic-bezier(.67, .17, .62, .64);
}
.mon-page .pw-overlay.open .pw-dialog {
  opacity: 1; filter: blur(0); transform: perspective(500px) translateZ(0) rotateX(0) rotateY(0);
  transition: opacity .5s ease-out .2s, filter .5s cubic-bezier(.17, .67, .51, 1) .2s, transform .5s cubic-bezier(.17, .67, .51, 1) .2s;
}
.mon-page .pw-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.mon-page .pw-sub { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }

.mon-page .pw-seg { display: flex; gap: 2px; padding: 2px; margin-bottom: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; }
.mon-page .pw-seg button { flex: 1; padding: 4px 6px; border-radius: 5px; font-size: 11px; font-weight: 500; color: var(--text-2); }
.mon-page .pw-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text-1); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(var(--shadow-rgb), .06); }
.mon-page .pw-seg button:disabled { opacity: .4; cursor: not-allowed; }
.mon-page .pw-field { position: relative; display: flex; }

.mon-page .pw-field .field { flex: 1; height: 30px; padding: 0 34px 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text-1); font-size: 12.5px; }
.mon-page .pw-field .eye { position: absolute; right: 2px; top: 2px; width: 26px; height: 26px; display: grid; place-items: center; color: var(--text-3); border-radius: 6px; }
.mon-page .pw-field .eye[aria-pressed="true"], .mon-page .pw-field .eye:hover { color: var(--text-1); }
.mon-page .pw-err { margin-top: 4px; font-size: 11.5px; min-height: 14px; color: var(--red-fg); }
.mon-page .pw-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.mon-page .opt[hidden] { display: none; }
.mon-page a.opt, .mon-page a.opt:hover { color: inherit; text-decoration: none; }

/* The problem stepper needs room the phone layout does not have; the table is a touch scroll there anyway. */

/* Boomi Status column: pills of different widths look scattered when centered, so this column is right-aligned (header too). */

/* Compact rows: less horizontal padding between columns; the first and last column keep the card's 16px edge. */
.mon-page th .sort, .mon-page th .plain { padding: 9px 8px; }
.mon-page td { padding: 8px 8px; }
.mon-page th:first-child .sort, .mon-page th:first-child .plain, .mon-page td:first-child { padding-left: 16px; }
.mon-page th:last-child .sort, .mon-page th:last-child .plain, .mon-page td:last-child { padding-right: 16px; }

/* When the panel opens, its header, sections and footer rise in one after another. */
@keyframes dIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mon-page .drawer.entering .d-head { animation: dIn 420ms var(--ease-drawer) 80ms both; }
.mon-page .drawer.entering .d-body > * { animation: dIn 460ms var(--ease-drawer) both; }
.mon-page .drawer.entering .d-body > :nth-child(1) { animation-delay: 140ms; }
.mon-page .drawer.entering .d-body > :nth-child(2) { animation-delay: 200ms; }
.mon-page .drawer.entering .d-body > :nth-child(3) { animation-delay: 260ms; }
.mon-page .drawer.entering .d-body > :nth-child(4) { animation-delay: 320ms; }
.mon-page .drawer.entering .d-body > :nth-child(n+5) { animation-delay: 380ms; }
.mon-page .drawer.entering .d-foot { animation: dIn 420ms var(--ease-drawer) 300ms both; }
@media (prefers-reduced-motion: reduce) {
  .mon-page .drawer.entering .d-head, .mon-page .drawer.entering .d-body > *, .mon-page .drawer.entering .d-foot { animation: none; }
}

/* ---- Side panel: section tools, full-screen viewer, status hint, compact details ---- */
.mon-page .drawer .d-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.mon-page .drawer .d-sec-h h4 { margin: 0; }
.mon-page .sec-tool { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); background: transparent; border: 1px solid transparent; transition: color 120ms ease, border-color 120ms ease, transform 120ms var(--ease-out); }
.mon-page .sec-tool:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .mon-page .sec-tool:hover { color: var(--text-1); border-color: var(--line); background: var(--surface); } }

.mon-page .code-copy.code-expand { right: 38px; }

/* Status hint: a small info icon with a tooltip instead of a line of text */

.mon-page .hint { position: relative; display: inline-grid; place-items: center; border-radius: 50%; cursor: help; outline: 0; }

.mon-page .hint::after { content: attr(data-tip); position: absolute; left: -6px; top: calc(100% + 8px); width: max-content; max-width: 250px; padding: 7px 10px; border-radius: 7px; background: var(--accent); color: var(--accent-fg); font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 140ms ease, transform 140ms var(--ease-out); z-index: 5; text-transform: none; letter-spacing: 0; }
.mon-page .hint:hover::after, .mon-page .hint:focus-visible::after { opacity: 1; transform: none; }

/* Full screen viewer / note editor */
.mon-page .fs-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 200ms ease; }
.mon-page .fs-overlay.open { opacity: 1; }
.mon-page .fs-card { width: min(1100px, 100%); height: min(88vh, 940px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); transform: translateY(12px) scale(.98); transition: transform 280ms var(--ease-drawer); overflow: hidden; }
.mon-page .fs-overlay.open .fs-card { transform: none; }
.mon-page .fs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mon-page .fs-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.mon-page .fs-tools { display: flex; align-items: center; gap: 6px; }
.mon-page .fs-tools .code-copy { position: static; }
.mon-page .fs-body { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 16px 20px; font-family: var(--font-ui); font-size: 14px; line-height: 1.65; color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.mon-page .fs-body.err { color: var(--red-fg); }
.mon-page .fs-edit { display: block; width: 100%; resize: none; border: 0; outline: 0; background: var(--surface); }
.mon-page .fs-hint { margin: 0; padding: 8px 20px; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .mon-page .fs-overlay { padding: 0; } .mon-page .fs-card { width: 100%; height: 100%; border-radius: 0; border: 0; } }
@media (prefers-reduced-motion: reduce) { .mon-page .fs-overlay, .mon-page .fs-card { transition: none; } }

/* Details: one line per fact (name left, value right) so the section takes about half the height */
.mon-page .drawer .fact:not(.wide), .mon-page .drawer .fact.inline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 10px; }
.mon-page .drawer .fact:not(.wide) .fk, .mon-page .drawer .fact.inline .fk { flex: none; white-space: nowrap; }
.mon-page .drawer .fact:not(.wide) .fv, .mon-page .drawer .fact.inline .fv { flex: 1; justify-content: flex-end; text-align: right; }
.mon-page .drawer .fact.wide { gap: 1px; padding: 6px 10px; }

/* The hint icon sits right after the "Status" title; the tooltip text is not uppercase like the title. */
.mon-page .drawer .d-sec h4 .hint { margin-left: 6px; vertical-align: -4px; }

/* Status hint icon: a solid circle with a clear "i"; and tighter spacing between the side panel's sections. */
.mon-page .hint { width: 18px; height: 18px; color: var(--text-3); }
.mon-page .hint:hover, .mon-page .hint:focus-visible { color: var(--text-1); }
.mon-page .drawer .d-body { gap: 12px; }

.mon-page #boomiStatusPill { display: flex; }
/* The Status hint icon uses the same color as its section title. */
.mon-page .drawer .d-sec h4 .hint { color: inherit; }
.mon-page .drawer .d-sec h4 .hint:hover, .mon-page .drawer .d-sec h4 .hint:focus-visible { color: var(--text-1); }

/* The copy / full screen buttons live inside the text box, floated top right and sticky, so they stay clear of the scroll bar. */
.mon-page .code-wrap .code { padding-right: 12px; padding-bottom: 36px; }
.mon-page .code-tools { position: sticky; top: 0; float: right; display: flex; margin: -2px -2px 4px 8px; z-index: 1; }
.mon-page .code-tools .code-copy, .mon-page .code-tools .code-copy.code-expand { position: static; }

/* Full screen buttons go at the bottom, like the table's: bottom right of a text box, and at the right of the note's hint line. */

.mon-page .code-foot { position: sticky; bottom: 0; display: block; height: 0; }
.mon-page .code-foot .code-copy, .mon-page .code-foot .code-copy.code-expand { position: absolute; right: -2px; bottom: 6px; }

/* Note: the full screen button sits inside the box, on a strip under the text (so it never covers the text or its scroll bar). */
.mon-page .note-wrap { background: var(--sunken); border: 1px solid var(--line); border-radius: 7px; transition: border-color 150ms ease; }
.mon-page .note-wrap:focus-within { border-color: var(--faint); }
@media (hover: hover) and (pointer: fine) { .mon-page .note-wrap:hover { border-color: var(--line-strong); } .mon-page .note-wrap:focus-within { border-color: var(--faint); } }
.mon-page .note-wrap .note-box { border: 0; background: transparent; border-radius: 7px 7px 0 0; max-height: 240px; box-shadow: none; }
.mon-page .note-bar { display: flex; justify-content: flex-end; padding: 0 6px 6px; }
.mon-page .note-bar .sec-tool { width: 26px; height: 26px; border-color: var(--line); background: var(--surface); }

/* Bootstrap gives anything with the class "progress" a 20px bottom margin (it is meant for progress bars). The "In progress" pill has that class,
   which made its row, and the Status section of the side panel, taller than the others. */
.mon-page .pill.progress { margin: 0; overflow: visible; }

/* Boomi side panel: the status pill in the header carries the info icon (the separate Status section is gone). */
.mon-page .d-sub .hint { color: var(--faint); margin-left: -2px; }
.mon-page .d-sub .hint:hover, .mon-page .d-sub .hint:focus-visible { color: var(--text-1); }

/* No focus ring when something is clicked with the mouse (Bootstrap draws a black "outline: auto" on links and buttons after a click).
   Keyboard focus keeps the visible ring from the :focus-visible rule above, like the crawler. */
.mon-page :focus:not(:focus-visible), .mon-page a:focus:not(:focus-visible), .mon-page button:focus:not(:focus-visible),
.mon-page [tabindex]:focus:not(:focus-visible), .mon-page [role="button"]:focus:not(:focus-visible) { outline: none; }

/* Boomi: a note is a small dot on the status pill's corner (no extra width, so all the pills stay aligned). */
.mon-page .st-wrap { position: relative; display: inline-block; vertical-align: middle; }

/* A Boomi alert with a note: a thin line on the row's right edge in the row's status color (New red, In progress blue, Solved green, Expired grey). */
.mon-page tr.mrow.has-note td:last-child { box-shadow: inset -2px 0 0 var(--faint); }
.mon-page tr.mrow.has-note.lv-error td:last-child { box-shadow: inset -2px 0 0 var(--red-dot); }
.mon-page tr.mrow.has-note.lv-progress td:last-child { box-shadow: inset -2px 0 0 var(--blue-dot); }
.mon-page tr.mrow.has-note.lv-solved td:last-child { box-shadow: inset -2px 0 0 var(--green-dot); }

/* Boomi: the status pill already says it, so the status line on the row's left edge is not drawn (the selected row's bar stays). */
.mon-page .tcard--boomi tr.mrow:not(.is-selected).lv-error td:first-child,
.mon-page .tcard--boomi tr.mrow:not(.is-selected).lv-warn td:first-child,
.mon-page .tcard--boomi tr.mrow:not(.is-selected).lv-progress td:first-child { box-shadow: none; }

/* Period / Errors / Warnings / Success: four separate cards, like the crawler's cards (white, 1px border, 12px radius, 12px gap),
   instead of one box divided by lines. */
.mon-page .readout { gap: 10px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.mon-page .ro, .mon-page .ro:last-child { padding: 11px 16px 12px; min-width: 124px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.mon-page .ro-v { font-size: 22px; }
.mon-page .ro-v.ro-v-text { font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .mon-page button.ro:hover { border-color: var(--line-strong); } }
@media (max-width: 720px) {
  .mon-page .readout { gap: 8px; }
  .mon-page .ro, .mon-page .ro:nth-child(2n), .mon-page .ro:nth-child(n+3), .mon-page .ro:last-child { border: 1px solid var(--line); padding: 9px 12px 10px; }
  .mon-page .ro-v { font-size: 19px; }
  .mon-page .ro-v.ro-v-text { font-size: 15px; }
}

/* Side panel list of errors / warnings: days are headed with their count, and today's items stand out (a "Today" tag, a colored line and a tint). */
.mon-page .day-h { display: flex; align-items: center; gap: 8px; }
.mon-page .day-h .day-n { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--faint); }
.mon-page .today-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-fg); background: var(--accent); }
.mon-page .day-h.is-today { color: var(--text-1); }
.mon-page .day-h.is-today.err .today-pill { background: var(--red-bg); color: var(--red-fg); }
.mon-page .day-h.is-today.warn .today-pill { background: var(--amber-bg); color: var(--amber-fg); }

/* Only today is closed off: a line in its color (red for errors, amber for warnings) where today ends and the earlier days begin. */
.mon-page .day-h { margin: 6px 0 4px; }
.mon-page .day-h.ends-today { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--line); }
.mon-page .day-h.ends-today.err { border-top-color: color-mix(in srgb, var(--red-dot) 13%, var(--surface)); }
.mon-page .day-h.ends-today.warn { border-top-color: color-mix(in srgb, var(--amber-dot) 16%, var(--surface)); }

/* Period menu: presets, then the same calendar as the table's date picker (no From / To fields). */
.mon-page .pmenu { min-width: 262px; }
.mon-page .pm-cal { margin: 4px 0 2px; padding: 10px 8px 4px; border-top: 1px solid var(--line); }
.mon-page .pm-cal .dp-foot { padding-bottom: 4px; }

/* Stay-in-full-screen reloads (after a filter): the table is already there, so it does not animate in again. */
.mon-page .tcard.full.full-keep { transition: none; }

/* Side panel opened from a table in full screen: above the table (z 45) and its backdrop (z 44). */
.mon-page .drawer.over-full { z-index: 61; }
.mon-page .drawer-back.over-full { z-index: 60; }

/* The full screen text viewer / note editor sits above everything, including the side panel opened over a full screen table (z 61). */
.mon-page .fs-overlay { z-index: 70; }

/* The line under the note box only shows save feedback (Saving / Saved / error); empty, it takes no space. */
.mon-page #noteStatus:empty { display: none; }

/* The note box is not resizable by dragging: the full screen button already gives room, and the drag handle sat right above it. */
.mon-page .note-wrap .note-box, .mon-page .note-box { resize: none; }

/* Note editors are contenteditable boxes (so Ctrl+B shows real bold), styled like the text boxes they replace. */
.mon-page div.note-box { overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; outline: none; }
.mon-page .note-box:empty::before, .mon-page .fs-edit:empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; }
.mon-page .note-box:focus-visible, .mon-page .fs-edit:focus-visible { outline: none; }
.mon-page .fs-edit { cursor: text; }
.mon-page .note-box b, .mon-page .fs-edit b { font-weight: 700; }

/* JSON inside a message: indented in its own block (mono, so the indentation reads). The { } switch is almost invisible until the box is hovered. */
.mon-page .json-block { display: flow-root; margin: 6px 0; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mon-page .fs-body .json-block { font-size: 13px; padding: 12px 14px; }
.mon-page .json-toggle { opacity: 0; transition: opacity 160ms ease; }
.mon-page .code:hover .json-toggle, .mon-page .fs-head:hover .json-toggle, .mon-page .json-toggle:focus-visible { opacity: .55; }
.mon-page .json-toggle:hover { opacity: 1; }
.mon-page .code-tools { gap: 4px; }

/* Title tooltip (only exists while the EKG line is flat): same look as the other small tooltips. The title text is painted through a gradient
   (background-clip: text), so the bubble resets those to look like a normal one. */
.mon-page #title[data-tip] { position: relative; cursor: default; }
.mon-page #title[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 10px); z-index: 20; width: max-content; max-width: 260px; padding: 8px 11px; border-radius: 8px;
  background: var(--accent); -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent-fg); -webkit-text-fill-color: var(--accent-fg);
  font-family: var(--font-ui); font-size: 12px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; white-space: pre; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 160ms ease, transform 160ms var(--ease-out); }
.mon-page #title[data-tip]:hover::after, .mon-page #title.tip-on::after { opacity: 1; transform: none; }

/* The "x N" repeat count after a time: a small pill, easy to spot (it used to be tiny grey text). */
.mon-page .rep { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 17px; vertical-align: 1px; }

/* In the errors / warnings list the repeat count sits in the info line, so it needs no left margin. */
.mon-page .err-item .rep { margin-left: 0; }

/* Status pills: darker text so every one passes the 4.5:1 contrast for small text (Warning was 4.4), and an icon instead of the dot. */

.mon-page .pill.ok, .mon-page .pill.solved { color: var(--pill-ok); }
.mon-page .pill.warn { color: var(--pill-warn); }
.mon-page .pill.run, .mon-page .pill.progress { color: var(--pill-run); }
.mon-page .pill.info { color: var(--pill-info); }
.mon-page .pill.error { color: var(--pill-err); }

.mon-page .pill svg.pi { flex: none; width: 10px; height: 10px; }

/* Status pill icons: a little smaller. */

.mon-page .pill { gap: 4px; padding-left: 6px; }

/* Status pills in the tables: all the same width, content centered, so each Status column lines up like a column of badges. */
.mon-page td .pill { min-width: 88px; justify-content: center; }
.mon-page td .pill.pill--icon { min-width: 0; padding: 2px 6px; margin-right: 6px; }
/* Boomi's Status column is centered like the other tabs' (it used to be right-aligned). */
.mon-page th.st, .mon-page td.st { text-align: center; }
.mon-page th.st .sort { justify-content: center; }
.mon-page th.st .plain { text-align: center; }

/* An expired Boomi alert (past Boomi's ~14 day retention) is dimmed like a solved one: nothing left to act on from Boomi's side. */
.mon-page tr.mrow.is-expired td, .mon-page tr.mrow.is-expired td .tag, .mon-page tr.mrow.is-expired td.msg .m, .mon-page tr.mrow.is-expired td.msg .e { color: var(--text-3); font-weight: 400; }
.mon-page tr.mrow.is-expired.has-note td:last-child { box-shadow: inset -2px 0 0 var(--faint); }

/* ===== Live refresh (Part 4) ===== */
/* Rows that just arrived after a refresh in place: a soft flash, so what changed is visible without the table jumping. */
@keyframes mon-row-new { from { background: rgba(59,130,246,.16); } to { background: transparent; } }
.tcard tbody tr.mrow.is-new > td { animation: mon-row-new 4s ease-out; }
@media (prefers-reduced-motion: reduce) { .tcard tbody tr.mrow.is-new > td { animation: none; } }

/* Alert toast (new problem): same look as the other toasts, plus a button. */
.mon-page .toast.has-action { display: flex; align-items: center; gap: 14px; max-width: min(92vw, 560px); }
.mon-page .toast .toast-act { flex: none; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: 600 12px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.mon-page .toast .toast-act:hover { background: rgba(128,128,128,.25); }

/* Pager stays put: the text on the left and the controls on the right take equal room, so the page buttons sit at the same spot on every page. */
@media (min-width: 721px) {
  .mon-page .tfoot #showing { flex: 1 1 0; min-width: 0; white-space: nowrap; }
  .mon-page .tfoot .tnav { flex: 1 1 0; justify-content: flex-end; margin-left: 0; }
}

/* Store cards carry long counters ("2,518 success 15 warnings" over 30 days): wide enough to show them whole. */
@media (min-width: 721px) { .mon-page .scards--stores { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }

/* ===== Order numbers (orders module) ===== */
.mon-page .oref { font: inherit; color: inherit; background: none; border: 0; padding: 0 2px; margin: 0 -2px; border-radius: 4px; text-decoration: underline dotted; text-decoration-color: var(--faint); text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mon-page .oref:hover { background: var(--sunken); text-decoration-color: currentColor; } }
.mon-page .oref:focus-visible { outline: 2px solid var(--text-1); outline-offset: 1px; }
.mon-page .oref-menu { position: fixed; z-index: 80; min-width: 214px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(var(--shadow-rgb), .14); }
.mon-page .oref-head { padding: 6px 10px 7px; margin-bottom: 3px; font-size: 11.5px; color: var(--text-3); border-bottom: 1px solid var(--line); }
.mon-page .oref-item { display: block; width: 100%; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; color: var(--text-1); text-align: left; background: none; border: 0; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mon-page .oref-item:hover { background: var(--sunken); } }
.mon-page .oref-item:focus-visible { outline: 2px solid var(--text-1); outline-offset: -2px; }

/* A source card whose source has stopped running: its dot turns red (the reason is in the tooltip). */
.mon-page .scard.is-stalled .sdot { background: var(--red-dot); }

/* ===== Search highlight ===== */
.mon-page mark.hit { background: rgba(250, 204, 21, .5); color: inherit; padding: 0 1px; border-radius: 3px; }
:root[data-theme="dark"] .mon-page mark.hit { background: rgba(250, 204, 21, .3); }
.mon-page .hit-more { margin-left: 8px; padding: 0 6px; font-size: 10.5px; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }

/* ===== Boomi: picked alerts (Ctrl/Shift+click) ===== */
.mon-page tbody tr.mrow.is-picked > td { background: color-mix(in srgb, var(--blue-fg) 11%, var(--surface)); }
.mon-page .pick-bar { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--text-1); color: var(--bg); font: 600 12px/1 Inter, system-ui, sans-serif; box-shadow: 0 6px 20px rgba(var(--shadow-rgb), .22); }
.mon-page .pick-bar[hidden] { display: none; }
.mon-page .pick-bar button { padding: 5px 10px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mon-page .pick-bar button:hover { background: rgba(128, 128, 128, .3); } }

/* ===== Part 4: responsive table (tablet and phone) ===== */

/* Bootstrap's fixed container (750 px from 768, 970 from 992) is narrower than the viewport and than the table's own minimum: between phone and
   desktop the page uses the width it has, with a small side gutter. */
@media (min-width: 721px) and (max-width: 1199px) {
  .container.body-content:has(.mon-page) { width: auto; max-width: none; padding-inline: clamp(16px, 2.5vw, 28px); }
}
@media (min-width: 861px) and (max-width: 1199px) { .mon-page table { min-width: 800px; } }

/* Up to 860 px the table does not fit with its message, and sliding sideways hides exactly what matters (status and message) while the time and
   store scroll away. Each row becomes a card: time, store and status on top, the message below, the remaining columns as small "Label: value" items. */
@media (max-width: 860px) {
  .mon-page .tscroll { overflow-x: hidden; }
  .mon-page table, .mon-page tbody { display: block; width: 100%; min-width: 0; }
  .mon-page colgroup, .mon-page thead { display: none; }
  .mon-page tbody tr:not(.mrow) { display: block; }
  .mon-page tbody tr:not(.mrow) > td { display: block; }
  .mon-page tr.sep td { top: 0; }

  .mon-page tr.mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; padding: 10px 14px; border-top: 1px solid var(--line-soft); }
  .mon-page tr.mrow > td { display: block; order: 5; min-width: 0; max-width: 100%; padding: 0; border: 0; overflow: visible; white-space: normal; text-align: left; font-size: 12px; color: var(--text-2); background: transparent !important; box-shadow: none !important; }
  .mon-page tr.mrow > td::before { content: attr(data-l) ": "; color: var(--faint); font-family: var(--font-ui); }
  .mon-page tr.mrow > td[data-e] { display: none; }

  .mon-page tr.mrow > td[data-k="time"] { order: 1; font-size: 11.5px; color: var(--text-3); }
  .mon-page tr.mrow > td[data-k="store"], .mon-page tr.mrow > td[data-k="feed"], .mon-page tr.mrow > td[data-k="merchant"],
  .mon-page tr.mrow > td[data-k="process"], .mon-page tr.mrow > td[data-k="channel"] { order: 2; font-size: 13px; color: var(--text-1); font-weight: 500; flex: 0 1 auto; }
  /* A long name (a Boomi process) shortens with an ellipsis so the status stays on the first line. */
  .mon-page tr.mrow > td[data-k="process"] { flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mon-page tr.mrow > td[data-k="status"] { order: 3; margin-left: auto; }
  .mon-page tr.mrow > td.msg { order: 4; flex: 1 0 100%; margin: 3px 0 2px; color: var(--text-1); }
  .mon-page tr.mrow > td[data-k="time"]::before, .mon-page tr.mrow > td[data-k="store"]::before, .mon-page tr.mrow > td[data-k="feed"]::before,
  .mon-page tr.mrow > td[data-k="merchant"]::before, .mon-page tr.mrow > td[data-k="process"]::before, .mon-page tr.mrow > td[data-k="channel"]::before,
  .mon-page tr.mrow > td[data-k="status"]::before, .mon-page tr.mrow > td.msg::before { content: none; }

  .mon-page td.msg .m, .mon-page td.msg .e { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
  .mon-page td.msg .e { -webkit-line-clamp: 2; }

  /* The level marker and the note marker move from the first / last cell to the row. */
  .mon-page tr.mrow.lv-error { box-shadow: inset 3px 0 0 var(--red-dot); }
  .mon-page tr.mrow.lv-warn { box-shadow: inset 3px 0 0 var(--amber-dot); }
  .mon-page tr.mrow.lv-progress { box-shadow: inset 3px 0 0 var(--blue-dot); }
  .mon-page tr.mrow.is-selected { background: var(--sunken); box-shadow: inset 3px 0 0 var(--text-1); }
  .mon-page tr.mrow.has-note { border-right: 2px solid var(--faint); }
  .mon-page tr.mrow.has-note.lv-error { border-right-color: var(--red-dot); }
  .mon-page tr.mrow.has-note.lv-progress { border-right-color: var(--blue-dot); }
  .mon-page tr.mrow.has-note.lv-solved { border-right-color: var(--green-dot); }
  .mon-page .tcard--boomi tr.mrow:not(.is-selected).lv-error, .mon-page .tcard--boomi tr.mrow:not(.is-selected).lv-warn,
  .mon-page .tcard--boomi tr.mrow:not(.is-selected).lv-progress { box-shadow: none; }
  .tcard tbody tr.mrow.is-new { animation: mon-row-new 4s ease-out; }
  .tcard tbody tr.mrow.is-new > td { animation: none; }
}
@media (max-width: 860px) and (hover: hover) and (pointer: fine) { .mon-page tr.mrow:hover { background: var(--sunken); } }
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .tcard tbody tr.mrow.is-new { animation: none; } }
@media (max-width: 860px) { .mon-page tbody tr.mrow.is-picked { background: color-mix(in srgb, var(--blue-fg) 11%, var(--surface)); } }

/* ===== Part 5: targets a finger can hit ===== */
/* Phone: the bar's buttons, the header's refresh and the panel's buttons are 40 px (they were 28-31). The pager is "‹ 3 / 45 ›" (see renderPager). */
@media (max-width: 720px) {
  .mon-page .thead-bar { padding: 10px 10px; }
  .mon-page .thead-bar .sbtn, .mon-page .thead-bar .icon-btn, .mon-page .thead-bar .dp-btn, .mon-page .thead-bar .sbox,
  .mon-page .thead-bar .web-btn, .mon-page .sbtn { min-width: 40px; height: 40px; }
  .mon-page .thead-bar .icon-btn, .mon-page .thead-bar .dp-btn { width: 40px; }
  .mon-page .thead-bar .sbox:not(:focus-within):not(.has-text) { width: 40px; }
  .mon-page .d-close { width: 40px; height: 40px; }
  /* Tight bars (320-380 px) wrap instead of overflowing. */
  .mon-page .thead-bar { flex-wrap: wrap; }
  .mon-page .page-btn { min-width: 44px; height: 40px; font-size: 16px; }
  .mon-page .page-of { min-width: 64px; text-align: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); }
  .mon-page .tpager { gap: 8px; }
  .mon-page .tfoot { padding: 8px 10px; }
}
/* Any touch screen: the order number inside a message is a small link; its hit area grows without moving the text. */
@media (max-width: 860px), (pointer: coarse) {
  .mon-page .oref { padding: 11px 4px; margin: -11px -4px; }
}
@media (pointer: coarse) and (min-width: 721px) {
  .mon-page .page-btn { min-width: 40px; height: 36px; }
  .mon-page .d-close { width: 36px; height: 36px; }
}
/* Narrow phones (320-380 px, which includes the common 360 and 375): 38 px buttons and tighter gaps keep the bar on one row. */
@media (max-width: 380px) {
  .mon-page .thead-bar { gap: 8px; }
  .mon-page .thead-bar .sgroup, .mon-page .thead-bar .right { gap: 4px; }
  .mon-page .thead-bar .sbtn, .mon-page .thead-bar .icon-btn, .mon-page .thead-bar .dp-btn, .mon-page .thead-bar .sbox,
  .mon-page .thead-bar .web-btn, .mon-page .sbtn { min-width: 38px; height: 38px; }
  .mon-page .thead-bar .icon-btn, .mon-page .thead-bar .dp-btn { width: 38px; }
  .mon-page .thead-bar .sbox:not(:focus-within):not(.has-text) { width: 38px; }
}

/* ===== Part 6: polish ===== */
/* The message column's text is left-aligned, so its title is too (the other columns are centered, title and content alike). */
.mon-page th.msg, .mon-page th.msg .plain { text-align: left; }
.mon-page th.msg .sort { justify-content: flex-start; }

@media (max-width: 720px) {
  /* The tab bar slides sideways: a soft shadow at each edge shows there is more, and goes away once that edge is reached. */
  .mon-page .tabs {
    background:
      linear-gradient(to right, var(--bg) 30%, transparent) left center / 26px 100% no-repeat local,
      linear-gradient(to left, var(--bg) 30%, transparent) right center / 26px 100% no-repeat local,
      linear-gradient(to right, rgba(var(--shadow-rgb), .16), transparent) left center / 12px 100% no-repeat scroll,
      linear-gradient(to left, rgba(var(--shadow-rgb), .16), transparent) right center / 12px 100% no-repeat scroll,
      var(--bg);
  }
  /* The Feeds tab has 20+ cards: stacked in two columns they push the table about 800 px down. On a phone they become a two-row strip that slides sideways. */
  .mon-page .scards[aria-label="Feed"] {
    grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 148px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin;
    background:
      linear-gradient(to right, var(--bg) 30%, transparent) left center / 26px 100% no-repeat local,
      linear-gradient(to left, var(--bg) 30%, transparent) right center / 26px 100% no-repeat local,
      linear-gradient(to right, rgba(var(--shadow-rgb), .16), transparent) left center / 12px 100% no-repeat scroll,
      linear-gradient(to left, rgba(var(--shadow-rgb), .16), transparent) right center / 12px 100% no-repeat scroll;
  }
  .mon-page .scards[aria-label="Feed"] > .scard { scroll-snap-align: start; }
}

/* ===== Part 7: paging on a phone ===== */
/* Changing page scrolls back to the top of the table: the card lands just under the fixed navbar. */
.mon-page .tcard { scroll-margin-top: calc(var(--mon-top, 0px) + 8px); }
/* Four page buttons plus "3 / 178" still fit at 320 px. */
@media (max-width: 380px) {
  .mon-page .tpager { gap: 4px; }
  .mon-page .page-btn { min-width: 40px; }
  .mon-page .page-of { min-width: 56px; }
}

/* ===== Part 8: the bar's controls when they open, on a phone ===== */
@media (max-width: 720px) {
  /* The date button keeps its 40 px (the range is shown inside the calendar): growing to show the range pushed the other buttons to a second row. */
  .mon-page .thead-bar .dp-btn:focus-visible, .mon-page .thead-bar .dp-btn[aria-expanded="true"] { width: 40px; }
  .mon-page .thead-bar .dp-btn:focus-visible span, .mon-page .thead-bar .dp-btn[aria-expanded="true"] span { opacity: 0; }

  /* Searching: the field takes the whole bar while it has focus (a phone keyboard is open anyway); the other buttons come back when it closes. */
  .mon-page .thead-bar:has(.sbox:focus-within) .sgroup,
  .mon-page .thead-bar:has(.sbox:focus-within) .right > :not(.sbox) { display: none; }
  .mon-page .thead-bar:has(.sbox:focus-within) .right { flex: 1 1 100%; width: 100%; margin-left: 0; }
  .mon-page .thead-bar .right .sbox:focus-within { width: 100%; }

  /* A search that is applied but not being edited stays a single 40 px button, marked as active, instead of keeping 160 px open. */
  .mon-page .thead-bar .sbox.has-text:not(:focus-within) { width: 40px; border-color: var(--text-1); color: var(--text-1); }
  .mon-page .thead-bar .sbox.has-text:not(:focus-within) input, .mon-page .thead-bar .sbox.has-text:not(:focus-within) .sclear { display: none; }
}

/* ===== Part 9: no layout animation in the phone's bar ===== */
@media (max-width: 720px) {
  /* The search field changes size at once. Animating its width let the other buttons come back before it had shrunk, so for about 200 ms they did not
     fit, dropped to a second row and then climbed back. */
  .mon-page .thead-bar .sbox { transition: border-color 150ms ease; }
  /* A selected status button shows only its icon (filled): with the label it was 73 px wide and the bar no longer fitted in one row. */
  .mon-page .sbtn[aria-pressed="true"] .sl { max-width: 0; opacity: 0; margin-left: 0; }
}

/* ===== Part 10: the expanded message / note viewer sits below the fixed navbar ===== */
/* The viewer covered the whole window, so the navbar (z 1030) was drawn over its top 51 px: on a phone that is exactly where the close button is, and a tap on
   the X reached the menu button instead. It now starts under the navbar, like the side panel and the full screen table, and the card fits what is left. */
.mon-page .fs-overlay { top: var(--mon-top, 0px); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.mon-page .fs-card { height: min(100%, 940px); }
@media (max-width: 720px) { .mon-page .fs-card { height: 100%; } }

/* ===== Part 11: the page behind a modal view does not scroll (phone) ===== */
@media (max-width: 720px), (pointer: coarse) {
  html.mon-lock, html.mon-lock body { overflow: hidden; overscroll-behavior: none; }
  .mon-page .fs-overlay { overscroll-behavior: contain; touch-action: none; }
  .mon-page .fs-body { overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  .mon-page .drawer { overscroll-behavior: contain; }
}
/* On a phone the page itself is what scrolls through the records (the table card has no height of its own), so a swipe that starts on a record must be allowed
   to reach the page. Only in full screen is the table its own scroller, and there it keeps to itself. */
@media (max-width: 720px) {
  .mon-page .tscroll { overscroll-behavior: auto; }
  .mon-page .tcard.full .tscroll { overscroll-behavior: contain; }
}

/* ===== Part 12: the "Visit app" link as a row of its own on a phone ===== */
@media (max-width: 720px) {
  .mon-page .web-btn.as-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; height: 40px; margin: 0; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--sunken); color: var(--text-2); }
  .mon-page .web-btn.as-row span { opacity: 1; color: var(--text-2); font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; }
  .mon-page .web-btn.as-row::after { content: "↗"; margin-left: auto; color: var(--faint); font-size: 13px; }
}

/* ===== Part 13: a compact top of the page on a phone ===== */
/* Before the first record there used to be 546 px of a 800 px screen (title, four 2x2 totals, store cards in a 2x2 grid). The totals are now one row of
   four small boxes with the refresh button up on the title row, and the store / feed cards are one row that slides sideways. */
@media (max-width: 720px) {
  .mon-page { padding-block: 14px 4px; }
  /* 18 px between the title (and its heartbeat line, which dips a little below it) and the totals */
  .mon-page .head { gap: 18px 10px; flex-wrap: wrap; align-items: center; }
  .mon-page .head-id { flex: 1 1 0; padding-bottom: 0; }
  .mon-page .head-tools { display: contents; }
  .mon-page .upd { order: 1; margin-left: auto; }
  .mon-page .head-tools .ro-wrap { order: 2; flex: 1 1 100%; width: 100%; min-width: 100%; }
  .mon-page .readout { grid-template-columns: 1.65fr 1fr 1fr 1fr; gap: 6px; }
  .mon-page .ro, .mon-page .ro:nth-child(2n), .mon-page .ro:nth-child(n+3), .mon-page .ro:last-child { padding: 6px 8px 7px; min-width: 0; overflow: hidden; border-radius: 10px; }
  .mon-page .ro-k { font-size: 9px; letter-spacing: .04em; gap: 4px; white-space: nowrap; }
  .mon-page .ro-k svg { display: none; }
  .mon-page .ro--period .ro-k svg { display: block; width: 11px; height: 11px; }
  .mon-page .ro-v { font-size: 16px; margin-top: 1px; white-space: nowrap; }
  .mon-page .ro-v.ro-v-text { font-size: 13px; margin-top: 2px; }
  .mon-page .tabs { margin-top: 14px; }
  .mon-page .scards--stores, .mon-page .scards[aria-label="Feed"], .mon-page .scards[aria-label="Merchant"] {
    grid-template-columns: none; grid-template-rows: auto; grid-auto-flow: column; grid-auto-columns: 150px;
    overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0; scrollbar-width: none;
  }
  .mon-page .scards--stores::-webkit-scrollbar, .mon-page .scards[aria-label="Feed"]::-webkit-scrollbar, .mon-page .scards[aria-label="Merchant"]::-webkit-scrollbar { display: none; }
}
/* Up to 380 px four boxes in a row leave no room for the words: Errors / Warnings / Success show only their coloured icon (the text stays for screen readers). */
@media (max-width: 380px) {
  .mon-page .ro--err .ro-k, .mon-page .ro--warn .ro-k, .mon-page .ro--ok .ro-k { font-size: 0; gap: 0; }
  .mon-page .ro--err .ro-k svg, .mon-page .ro--warn .ro-k svg, .mon-page .ro--ok .ro-k svg { display: block; width: 13px; height: 13px; }
  .mon-page .ro-v.ro-v-text { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .mon-page .readout { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .mon-page .ro, .mon-page .ro:nth-child(2n), .mon-page .ro:nth-child(n+3), .mon-page .ro:last-child { padding: 6px 6px 7px; }
  .mon-page .ro-v { font-size: 15px; }
}

/* ================= Part 14: tablet width (721-920 px) ================= */
/* The four store cards used to wrap as 3 + 1 (190 px minimum) and the six tabs did not fit, so Returns / Boomi were cut off. */
@media (min-width: 721px) and (max-width: 860px) { .mon-page .scards--stores { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
@media (min-width: 721px) and (max-width: 920px) { .mon-page .tabs { gap: 1px; } .mon-page .tab { padding: 0 7px; gap: 5px; font-size: 12px; } }
@media (min-width: 721px) and (max-width: 780px) { .mon-page .tab { padding: 0 5px; } }
/* A custom range ("10/20 - 10/24") made the period box wider, the header no longer fit on one row at 768 px and the whole readout dropped under the
   title (the page jumped 57 px). Smaller boxes keep title, readout and refresh on one row for every period text. */
@media (min-width: 721px) and (max-width: 860px) {
  .mon-page .head { gap: 20px 16px; flex-wrap: nowrap; }
  .mon-page .head-tools { gap: 8px; flex: 0 1 auto; min-width: 0; }
  .mon-page .readout { gap: 8px; }
  .mon-page .ro, .mon-page .ro:last-child { padding: 10px 12px 11px; min-width: 0; }
}
/* On a touch tablet the page buttons are 36-40 px and the footer ran out of room: the date button ("10/19 - 10/26") wrapped to two lines and spilled out
   of its box next to the expand button, and "Showing 1-100 of ..." was cut. The date never wraps, and the pager gives back a few pixels. */
.mon-page .dp-btn { white-space: nowrap; flex: none; }
@media (pointer: coarse) and (min-width: 721px) and (max-width: 860px) {
  .mon-page .tfoot { gap: 8px; padding-inline: 12px; }
  .mon-page .tpager { gap: 2px; }
  .mon-page .page-btn { min-width: 36px; }
}

/* ===== Part 15: the "Visit app" link in the footer on desktop (option B) ===== */
/* Next to the search button it was easy to hit by mistake, and the search field grows to the left over it. From 901 px it is a quiet text link at the left of
   the footer, beside "Showing ...". Up to 900 px (phone and tablet) it stays a row of its own under the filters (Part 12). */
@media (min-width: 721px) and (max-width: 900px) {
  .mon-page .web-btn.as-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; height: 34px; margin: 0; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--sunken); color: var(--text-2); }
  .mon-page .web-btn.as-row span { opacity: 1; color: var(--text-2); font-family: var(--font-ui); font-size: 12px; font-weight: 500; }
  .mon-page .web-btn.as-row::after { content: "↗"; margin-left: auto; color: var(--faint); font-size: 13px; }
}
@media (min-width: 901px) {
  .mon-page .tfoot .tleft { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
  .mon-page .tfoot .tleft #showing { flex: none; }
  .mon-page .web-btn.as-foot { display: inline-flex; align-items: center; gap: 5px; width: auto; height: auto; min-width: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-3); font-size: 11px; }
  .mon-page .web-btn.as-foot span { color: inherit; font-family: var(--font-ui); font-size: 11px; font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: text-decoration-color .15s ease; }
  .mon-page .web-btn.as-foot .internet-mark { width: 12px; height: 12px; }
  .mon-page .web-btn.as-foot::after { content: "↗"; color: var(--faint); font-size: 11px; }
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .mon-page .web-btn.as-foot:hover { color: var(--text-1); }
  .mon-page .web-btn.as-foot:hover span { text-decoration-color: currentColor; }
}

/* ===== Part 16: "Updated hh:mm:ss" instead of the refresh button ===== */
/* The page re-reads itself every 20 s, so the button was not needed; what was missing is knowing the data is current. Two failed reads in a row turn it amber. */
.mon-page .upd { display: grid; gap: 1px; justify-items: end; text-align: right; white-space: nowrap; padding: 0 2px; }
.mon-page .upd-k { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.mon-page .upd-v { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }
.mon-page .upd.is-stale .upd-k, .mon-page .upd.is-stale .upd-v { color: var(--amber-fg); }
.mon-page .upd.is-stale .upd-k::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--amber-dot); vertical-align: 1px; }

/* ===== Part 17: the selected row stands out while its detail panel is open ===== */
/* The old mark was a 2px dark bar and a background almost the same as the page, easy to miss next to coloured Boomi rows. A blue tint plus a 3px blue bar on the left is visible in every tab and in both themes. */
.mon-page .tcard tbody tr.mrow.is-selected > td { background: color-mix(in srgb, var(--blue-fg) 10%, var(--surface)); }
.mon-page .tcard tbody tr.mrow.is-selected > td:first-child { box-shadow: inset 3px 0 0 var(--blue-fg); }
@media (max-width: 860px) { .mon-page .tcard tbody tr.mrow.is-selected { background: color-mix(in srgb, var(--blue-fg) 10%, var(--surface)); box-shadow: inset 3px 0 0 var(--blue-fg); } }

/* ===== Part 18: smoother change of row with the arrows of the details panel ===== */
/* The panel keeps its place and only its content changes: it rises in from below (next row) or drops in from above (previous row), and the row highlight fades instead of jumping. */
@keyframes dSwapNext { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dSwapPrev { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mon-page .drawer.swap-next .d-head, .mon-page .drawer.swap-next .d-body, .mon-page .drawer.swap-next .d-foot { animation: dSwapNext 240ms var(--ease-out) both; }
.mon-page .drawer.swap-prev .d-head, .mon-page .drawer.swap-prev .d-body, .mon-page .drawer.swap-prev .d-foot { animation: dSwapPrev 240ms var(--ease-out) both; }
.mon-page .tcard tbody tr.mrow > td { transition: background-color 160ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .mon-page .drawer.swap-next .d-head, .mon-page .drawer.swap-next .d-body, .mon-page .drawer.swap-next .d-foot,
  .mon-page .drawer.swap-prev .d-head, .mon-page .drawer.swap-prev .d-body, .mon-page .drawer.swap-prev .d-foot { animation: none; }
  .mon-page .tcard tbody tr.mrow > td { transition: none; }
}

/* ===== Part 19: readability (found by an accessibility scan of every tab) ===== */
/* Day separators and the page footer used the faintest grey (2.4-2.5:1 against the background; 4.5:1 is the minimum for text), and the small labels were 10-10.5px.
   Only the desktop sizes change: the phone layout keeps its own, deliberately compact sizes. Dimmed (.off) feed cards are disabled on purpose and are left as they are. */
.mon-page tr.sep td, .mon-page .site-foot { color: var(--text-3); }
@media (min-width: 861px) {
  .mon-page .ro-k, .mon-page .upd-k, .mon-page .scard .foot { font-size: 11px; }
}

/* ===== Part 20: the search bar is always open on desktop ===== */
/* On a mouse-driven screen the search box used to be a 30px icon that grew on hover/focus; now it is shown open and does not animate. Phones and touch tablets keep the collapsing icon (it saves room there). */
@media (min-width: 861px) and (pointer: fine) {
  .mon-page .sbox { width: 260px; cursor: text; transition: border-color 150ms ease; }
  .mon-page .sbox input { opacity: 1; transition: none; }
  .mon-page .sbox:hover, .mon-page .sbox:focus-within, .mon-page .sbox.has-text { width: 260px; transition-delay: 0ms; }
}