/* =========================================================================
* Mutua Home Console — component styles (over Tabler, brand token layer).
* ========================================================================= */
* { box-sizing: border-box; }
/* The UA rule behind [hidden] is display:none at the lowest specificity, so any
component that sets its own display — .btn-link is inline-flex — outranks it
and stays on screen after the script has hidden it. Scripts here hide things
that must not be actionable (the delete control on a case that does not exist
yet), so the attribute wins outright rather than per component. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
font-family: var(--font-sans);
color: var(--brand-blue-text);
background: var(--brand-background);
-webkit-font-smoothing: antialiased;
font-size: 14px;
}
a { color: var(--brand-accent); text-decoration: none; }
a:hover { color: var(--brand-accent-hover); }
.mono { font-family: var(--font-mono); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--brand-grey); border-radius: 6px; border: 2px solid var(--brand-background); }
@keyframes mhc-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes mhc-toast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mhc-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
/* ---- Layout shell ---- */
.app-shell { display: flex; height: 100vh; overflow: hidden; position: relative; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.app-content { flex: 1; min-height: 0; overflow: auto; position: relative; }
/* ---- Sidebar ---- */
.app-sidebar {
background: var(--brand-accent); width: 236px; flex-shrink: 0;
display: flex; flex-direction: column; box-shadow: var(--brand-shadow-sidebar);
position: relative; z-index: 3;
}
.app-sidebar__brand { padding: 16px 12px 12px; }
.app-sidebar__brand-card {
height: 48px; display: flex; align-items: center; justify-content: center;
}
.app-sidebar__brand-card img {
display: block; width: 100%; height: 100%; object-fit: contain;
}
.app-sidebar__product { position: relative; margin: 13px 0 0; padding: 14px 0 0 7px; line-height: 1.15; text-align: left; }
.app-sidebar__product::before { content: ''; position: absolute; top: 0; left: -3rem; right: -3rem; height: 1px; background: var(--brand-sidebar-border); }
.app-sidebar__brand-name { color: #fff; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.app-sidebar__brand-sub { margin-top: 7px; color: var(--brand-accent-variant); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .11em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.app-sidebar__nav { flex: 1; padding: 6px 12px; overflow-y: auto; }
.app-sidebar__section { color: var(--brand-sidebar-text-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 14px 12px 8px; }
.app-nav-item {
display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; margin-bottom: 2px;
border: none; cursor: pointer; border-radius: var(--radius-md); text-align: left;
font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
color: var(--brand-sidebar-text); background: transparent; transition: background var(--transition-fast);
}
.app-nav-item:hover { background: var(--brand-sidebar-hover-bg); color: #fff; }
.app-nav-item.is-active { color: #fff; font-weight: 600; background: var(--brand-sidebar-active-bg); }
.app-nav-item i { font-size: 17px; width: 18px; }
.app-sidebar__credit { padding: 10px 20px 13px; }
.app-sidebar__credit-label {
display: block; margin-bottom: 7px; color: var(--brand-sidebar-text-dim);
font-size: 9.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
}
.app-sidebar__credit-card {
height: 34px; display: flex; align-items: center;
}
.app-sidebar__credit-card img {
display: block; width: auto; max-width: 156px; height: 100%; object-fit: contain;
opacity: .92;
}
.app-sidebar__user { padding: 12px; border-top: 1px solid var(--brand-sidebar-border); display: flex; align-items: center; gap: 10px; }
.app-sidebar__avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; }
.app-sidebar__user-name { color: #fff; font-size: 12px; font-weight: 600; }
.app-sidebar__user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar__user-role { color: var(--brand-sidebar-text-dim); font-size: 10.5px; }
.app-sidebar__signout {
display: inline-flex; align-items: center; justify-content: center; padding: 5px;
border: none; border-radius: var(--radius-md); background: transparent; cursor: pointer;
color: var(--brand-sidebar-text-dim); font-size: 16px; transition: background var(--transition-fast);
}
.app-sidebar__signout:hover { background: var(--brand-sidebar-hover-bg); color: #fff; }
/* ---- Topbar ---- */
.app-topbar {
flex-shrink: 0; height: 56px; background: #fff; border-bottom: 1px solid var(--border-color);
display: flex; align-items: center; gap: 12px; padding: 0 16px; z-index: 2;
}
.app-topbar__title { font-size: 15px; font-weight: 600; color: var(--brand-black); }
.app-topbar__note { font-size: 12px; color: var(--brand-grey-text); }
@media (max-width: 720px) { .app-topbar__note { display: none; } }
.app-topbar__meta { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--brand-grey-text); font-size: 12px; }
.app-topbar__meta i { font-size: 17px; cursor: pointer; }
/* The watch switch is the last thing on the bar, so it is in the same corner on
every screen that has one — and nowhere near the row where a page's own
buttons live. */
.app-topbar .live { flex-shrink: 0; }
/* Everything on the bar gives way before the switch does: the title truncates,
then the timezone goes. A control pushed off the right edge of the bar cannot
be reached at all, and the bar does not scroll. */
@media (max-width: 720px) {
.app-topbar__title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar__meta { display: none; }
.app-topbar .live { margin-left: auto; }
}
.env-badge {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-md);
background: var(--tint-accent); color: var(--brand-accent); font-size: 11px; font-weight: 600; letter-spacing: .03em;
}
.env-badge.is-prod { background: var(--tint-danger); color: var(--brand-danger); }
.env-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--brand-grey); border-radius: var(--radius-md); color: var(--brand-blue-text); cursor: pointer; }
.sidebar-toggle { display: none; }
/* ---- Badges / tints ---- */
.mhc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; line-height: 1.4; padding: 2px 8px; border-radius: var(--radius-md); white-space: nowrap; }
.tint-neutral { background: var(--brand-grey-light); color: var(--brand-grey-text); }
.tint-accent { background: var(--tint-accent); color: var(--brand-accent); }
.tint-success { background: var(--tint-success); color: var(--brand-success); }
.tint-success-strong { background: var(--tint-success-strong); color: var(--brand-success); }
.tint-warning { background: var(--tint-warning); color: var(--brand-warning); }
.tint-danger { background: var(--tint-danger); color: var(--brand-danger); }
.tint-milestone { background: var(--tint-milestone); color: var(--brand-milestone); }
/* Squarer, tighter variant — used where the badge is a type marker on a row. */
/* ---- Buttons ---- */
.btn-primary, .btn-ghost, .btn-danger {
display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-md);
padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-sans);
}
.btn-primary { background: var(--brand-accent); color: #fff; border: 1px solid var(--brand-accent); box-shadow: var(--brand-shadow-btn); }
.btn-primary:hover { background: var(--brand-accent-hover); color: #fff; }
.btn-ghost { background: #fff; border: 1px solid var(--brand-grey); color: var(--brand-blue-text); }
.btn-ghost:hover { background: var(--brand-grey-light); }
/* Only ever the confirming button of a destructive dialog, never a row action:
the weight is what makes the dialog read as the point of no return. */
.btn-danger { background: var(--brand-danger); color: #fff; border: 1px solid var(--brand-danger); }
.btn-danger:hover { filter: brightness(0.93); color: #fff; }
.btn-link { background: none; border: none; color: var(--brand-accent); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--font-sans); display: inline-flex; align-items: center; gap: 5px; }
/* An identifier that is also the way into the thing it names. No underline: the
key is read as data first, so the rule would sit under a value; the accent and
the hover are the affordance. */
.key-link { color: var(--brand-accent); text-decoration: none; font-weight: 600; }
.key-link:hover { filter: brightness(0.85); }
/* ---- Page heading ---- */
.page-head { padding: 22px 28px 14px; }
.page-head h1 { margin: 0; font-size: 26px; font-weight: 500; color: var(--brand-black); line-height: 1.15; }
.page-head p { margin: 6px 0 0; font-size: 13px; color: var(--brand-grey-text); max-width: 640px; }
.page-body { padding: 0 28px 28px; }
/* The title and the way out of the page sit on one line: the walk through a list
belongs beside what is being walked, not below the description of it. */
/* Title on the left, the arrows that walk the list on the right, on one line at
every width: the row never wraps, so the arrows never end up under the title.
A long title breaks inside itself instead — `min-width: 0` is what lets it,
since a flex item refuses to shrink past its longest word without it. */
.page-head__line { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
.page-head__line h1 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.page-head__line > .step-nav { flex-shrink: 0; margin-left: auto; }
/* What the title is qualified by, and the one way on from it, under the title on a
baseline of their own: a button set in a sentence of prose reads as neither. */
.page-head__aside { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--brand-grey-text); }
/* A title that can be renamed in place. The pencil sits against the end of the
title rather than at the end of the line — it belongs to the words, not to the
header — and it stays visible, so the offer to rename does not have to be found
by hovering. The field it opens is set in the heading's own face and size, so
renaming looks like typing over the title rather than filling in a form about it. */
.title-edit { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
/* Sized by the text, not by the line, so the pencil follows the last word. */
.page-head__line .title-edit h1 { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.icon-btn--bare { width: 28px; height: 28px; border: none; background: none; color: var(--brand-grey-text); flex-shrink: 0; }
.icon-btn--bare i { font-size: 17px; }
.icon-btn--bare:hover { color: var(--brand-accent); background: var(--brand-grey-light); }
.title-edit__input { flex: 1 1 auto; min-width: 0; font-family: var(--font-sans); font-size: 26px; font-weight: 500; color: var(--brand-black); line-height: 1.15; padding: 2px 8px; border: 1px solid var(--brand-grey); border-radius: var(--radius-md); background: #fff; }
.title-edit__input:focus { outline: none; border-color: var(--brand-accent); }
.title-edit [hidden] { display: none; }
/* ---- Nested-page navigation ---- */
.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12.5px; }
.crumbs__link { color: var(--brand-accent); font-weight: 600; text-decoration: none; }
.crumbs__link:hover { text-decoration: underline; }
.crumbs__sep { font-size: 13px; color: var(--brand-grey-text); }
.crumbs__here { color: var(--brand-grey-text); font-weight: 500; }
/* The stacked chevrons the task detail is walked with, so every nested screen in
the console moves the same way. The count carries the words: two arrows cannot
say what they are walking. Kept in place rather than hidden at the ends of the
list — a control that disappears moves the one next to it under the pointer. */
.step-nav { display: flex; align-items: center; gap: 6px; }
.step-nav__btn { width: 32px; height: 32px; text-decoration: none; }
.step-nav__count { font-size: 12px; color: var(--brand-grey-text); white-space: nowrap; margin-right: 4px; }
/* Below a wide screen the words go and the arrows stay: the position in the list
is context, and the title it would be taking room from is the point. */
@media (max-width: 1100px) { .step-nav__count { display: none; } }
/* ---- Toolbar / filters ---- */
.toolbar { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.search-box { position: relative; display: flex; align-items: center; flex: 1; max-width: 340px; }
.search-box i { position: absolute; left: 11px; color: var(--brand-grey-text); font-size: 16px; pointer-events: none; }
.search-box input, .search-box input[type=text] { width: 100%; font-family: var(--font-sans); font-size: 13px; color: var(--brand-blue-text); background: #fff; border: 1px solid var(--brand-grey); border-radius: var(--radius-md); padding: 8px 12px 8px 34px; outline: none; }
.filter-panel { margin-top: 12px; padding: 16px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); animation: mhc-fadein .2s ease; }
.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field[hidden], [data-show-when][hidden] { display: none; }
.field > span, .field > label { font-size: 11px; font-weight: 600; color: var(--brand-grey-text); text-transform: uppercase; letter-spacing: .04em; }
/* Which fields block the save, marked on the label rather than left to be
discovered by pressing Save and watching nothing happen. */
.field:has(> [required]) > span:first-child::after { content: " *"; color: var(--brand-danger); }
.filter-toggles { display: flex; gap: 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--brand-blue-text); }
input[type=text], input[type=time], input[type=number], input[type=datetime-local], input[type=tel], select, textarea {
font-family: var(--font-sans); font-size: 13px; color: var(--brand-blue-text); background: #fff;
border: 1px solid var(--brand-grey); border-radius: var(--radius-md); padding: 7px 10px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--brand-accent-ring); }
textarea { font-family: var(--font-sans); resize: vertical; }
/* The native control packs its arrow against the border and sizes itself from
* the longest option, which reads as cramped next to the text inputs. Drawn
* here instead: an inline chevron with room around it, and a right padding that
* keeps the longest option clear of it. The SVG is inlined because the CSP
* allows no external requests. */
select {
appearance: none; -webkit-appearance: none; cursor: pointer;
padding: 7px 32px 7px 11px; line-height: 1.4;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
select:hover { border-color: var(--brand-accent-border-soft); }
select:disabled { background-color: var(--brand-grey-light); color: var(--brand-grey-text); cursor: not-allowed; }
/* ---- Table ---- */
/* .table-scroll is BOTH the horizontal scroll port and the vertical one, so the
* sticky header stays put during infinite scroll and columns keep their widths.
* max-height lets short tables render fully while long ones scroll internally;
* inside a flex column (.page--table) it flexes to fill the viewport instead. */
.table-scroll { border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: #fff; overflow: auto; max-height: 100%; }
.page--table .table-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1040px; }
.data-table--config { min-width: 760px; }
.data-table th { text-align: left; background: var(--brand-grey-light); color: var(--brand-blue-text); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; padding: 9px 16px; white-space: nowrap; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--border-strong); }
.data-table td { padding: 11px 16px; border-bottom: 1px solid var(--border-color); font-size: 13px; vertical-align: top; }
.data-table tbody tr { cursor: pointer; transition: background .12s; }
.data-table tbody tr:hover { background: var(--brand-grey-light); }
.data-table tbody tr.is-inactive td { color: var(--brand-grey-text); }
.data-table tbody tr.is-inactive td:first-child { opacity: .75; }
.data-table tr:last-child td { border-bottom: none; }
.data-table td.nowrap { white-space: nowrap; }
.td-sub { font-size: 11px; color: var(--brand-grey-text); }
.td-strong { font-weight: 500; color: var(--brand-black); }
.tbl-check { color: var(--brand-success); font-size: 16px; }
.tbl-dash { color: var(--brand-grey); }
/* ---- Page as a full-height table shell ---- */
.page--table { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.page--table .page-head { flex-shrink: 0; }
.page--table .page-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* A detail page whose body is cards and sections rather than one table: it does
* its own vertical scrolling, where .page--table hands a fixed height to the
* table viewport inside it. */
.page--scroll { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.page--scroll .page-head { flex-shrink: 0; }
.page--scroll .page-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
/* The body scrolls, so its sections must keep their own height instead of being
* squeezed to fit it — a section expanded by the reader has to push the page
* down, not compress the ones above it. */
.page--scroll .page-body > * { flex-shrink: 0; }
/* A scrolling form page (General) with a sticky action footer. */
.page--form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.page--form .page-head { flex-shrink: 0; }
.page--form .page-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding-bottom: 0; }
/* ---- Infinite-scroll feedback row ---- */
.load-more { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; font-size: 12.5px; color: var(--brand-grey-text); }
.load-more[hidden] { display: none; }
.load-more.is-error { color: var(--brand-danger); }
.load-more__spin { width: 15px; height: 15px; border: 2px solid var(--brand-grey); border-top-color: var(--brand-accent); border-radius: 50%; animation: mhc-spin .7s linear infinite; }
.load-more .btn-link { color: var(--brand-danger); }
.btn-block { width: 100%; justify-content: center; }
.btn-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: mhc-spin .7s linear infinite; }
.btn-spin[hidden] { display: none; }
@keyframes mhc-spin { to { transform: rotate(360deg); } }
/* ---- Empty / error / skeleton ---- */
.state-card { border: 1px dashed var(--brand-grey); border-radius: var(--radius-xl); background: #fff; padding: 64px 24px; text-align: center; }
.state-card.is-error { border-color: var(--tint-danger); border-style: solid; }
.state-card__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--tint-accent); color: var(--brand-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 14px; }
.state-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--brand-black); }
.state-card p { margin: 0; font-size: 13px; color: var(--brand-grey-text); }
.skeleton-row { height: 46px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 16px; gap: 16px; }
.skeleton-bar { height: 12px; border-radius: 4px; background: linear-gradient(90deg,#eef0fb 25%,#e2e5f6 37%,#eef0fb 63%); background-size: 800px 100%; animation: mhc-shimmer 1.4s infinite linear; }
/* ---- Split view ---- */
.split { position: absolute; inset: 0; display: flex; overflow: hidden; }
.split__list { width: 288px; flex-shrink: 0; border-right: 1px solid var(--border-color); background: #fff; display: flex; flex-direction: column; overflow: hidden; }
.split__list-head { flex-shrink: 0; padding: 12px 14px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 8px; }
.split__list-body { flex: 1; min-height: 0; overflow-y: auto; }
.split-item { padding: 12px 14px; border-bottom: 1px solid var(--border-color); cursor: pointer; border-left: 3px solid transparent; display: block; }
.split-item.is-active { border-left-color: var(--brand-accent); background: var(--tint-accent); }
.split-item__id { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--brand-black); }
.split-item__service { font-size: 12.5px; color: var(--brand-blue-text); margin-top: 5px; line-height: 1.3; }
.split-item__meta { font-size: 11.5px; color: var(--brand-grey-text); }
.split__detail { flex: 1; min-width: 0; overflow-y: auto; transition: opacity var(--transition-fast); }
/* In-flight pane swap: dim rather than spin — the fetch usually lands in well
under a second, so a spinner would only flicker. */
.split__detail.is-loading { opacity: .5; }
.icon-btn[data-disabled] { opacity: .5; pointer-events: none; }
/* ---- Detail ---- */
.detail-head { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--border-color); padding: 16px 28px; }
.detail-head__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-head__id { font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--brand-black); }
.detail-body { padding: 22px 28px 60px; max-width: 1080px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 12px; }
.info-card { border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: #fff; padding: 16px 18px; }
.info-card__title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: 12px; }
.info-row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 13px; }
.info-row__k { color: var(--brand-grey-text); }
.info-row__v { color: var(--brand-blue-text); text-align: right; max-width: 62%; }
.identity-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
/* ---- Timeline ---- */
.timeline { margin-top: 24px; }
.timeline__node { display: flex; gap: 16px; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; width: 34px; flex-shrink: 0; }
.timeline__circle { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--brand-grey); background: #fff; color: var(--brand-blue-text); font-family: var(--font-mono); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline__circle.is-active { border-color: var(--brand-accent); background: var(--brand-accent); color: #fff; box-shadow: 0 0 0 4px var(--brand-accent-ring); }
.timeline__line { flex: 1; width: 2px; background: var(--brand-grey); margin: 4px 0; }
.timeline__content { flex: 1; min-width: 0; padding-bottom: 16px; }
.attempt-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); padding: 8px 12px; cursor: pointer; text-align: left; font-family: var(--font-sans); }
.attempt-head.is-active { background: var(--tint-accent); border-color: var(--brand-accent-border-soft); }
/* ---- Attempt panel ---- */
.attempt-panel { margin-top: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: #fff; animation: mhc-fadein .18s ease; overflow: hidden; }
.attempt-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-color); padding: 0 12px; flex-wrap: wrap; }
.attempt-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 12px; font-size: 12.5px; font-weight: 500; color: var(--brand-grey-text); cursor: pointer; font-family: var(--font-sans); }
.attempt-tab.is-active { color: var(--brand-accent); border-bottom-color: var(--brand-accent); font-weight: 600; }
.attempt-tabpane { padding: 16px 18px; }
.attempt-tabpane[hidden] { display: none; }
.panel-section-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-grey-text); margin: 0 0 10px; }
.attempt-tab__badge { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: 8px; background: var(--brand-grey-light); color: var(--brand-grey-text); }
/* Read-only prose set apart from the surrounding key/value grid (call summary). */
.text-block { background: var(--brand-grey-light); border-radius: var(--radius-md); padding: 12px 14px; margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--brand-black); }
/* Outcome tab: each group (milestones / steps / incidents / requests) reads as its own block. */
.outcome-group { display: flex; flex-direction: column; gap: 4px; padding-left: 10px; border-left: 2px solid var(--border-color); margin-bottom: 18px; }
/* ---- Persistent audio player (top of attempt panel) ---- */
.audio-bar { padding: 12px 16px; border-bottom: 1px solid var(--border-color); background: #fff; }
.audio-note { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--radius-md); font-size: 12.5px; }
.audio-note[hidden] { display: none; }
.audio-note.is-off { background: var(--brand-grey-light); color: var(--brand-grey-text); }
.audio-note.is-processing { background: var(--tint-warning); color: var(--brand-warning); }
.audio-note i { font-size: 17px; }
.audio-player { --audio-time-h: 16px; display: flex; align-items: center; gap: 12px; }
.audio-player__play { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--brand-accent); color: #fff; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: var(--brand-shadow-btn); }
.audio-player__play:hover { background: var(--brand-accent-hover); }
.audio-player__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* Empty mirror of the time row. It balances the column so the bar — not the
bar+time block — sits on the row's centerline, level with the play and speed
buttons, while the time still reads underneath the bar. */
.audio-player__body::before { content: ''; height: var(--audio-time-h); }
.audio-player__time { height: var(--audio-time-h); font-family: var(--font-mono); font-size: 11.5px; line-height: var(--audio-time-h); color: var(--brand-grey-text); }
.audio-player__track { position: relative; height: 6px; background: var(--brand-grey); border-radius: 3px; cursor: pointer; touch-action: none; }
/* Invisible band around the 6px bar so the thumb is easy to grab; it stops
short of the time label below so that text stays clickable-through. */
.audio-player__track::after { content: ''; position: absolute; inset: -11px 0 -5px; }
.audio-player__fill { height: 100%; width: 0; background: var(--brand-accent); border-radius: 3px; }
.audio-player__thumb { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--brand-accent); border: 2px solid var(--brand-white); box-shadow: var(--brand-shadow-sm); transition: transform var(--transition-fast); }
.audio-player__track:hover .audio-player__thumb,
.audio-player__track.is-dragging .audio-player__thumb { transform: scale(1.2); }
.audio-player__rate { min-width: 42px; flex-shrink: 0; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--brand-white); color: var(--brand-grey-text); font-family: var(--font-mono); font-size: 11.5px; cursor: pointer; }
.audio-player__rate:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
/* ---- Transcript (chat bubbles: client left, voice agent right) ---- */
.transcript { display: flex; flex-direction: column; gap: 12px; }
.turn { display: flex; }
/* align-items keeps the bubble at its own width: without it the body stretches
to the speaker/timestamp row and short messages render half empty. */
.turn__wrap { max-width: 76%; display: flex; flex-direction: column; align-items: flex-start; }
.turn__meta { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.turn__spk { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.turn__t { font-family: var(--font-mono); font-size: 10.5px; color: var(--brand-grey-text); }
.turn__body { font-size: 13px; line-height: 1.5; padding: 9px 13px; color: var(--brand-blue-text); }
/* Client → left, green label, grey bubble, tail top-left */
.turn--client { justify-content: flex-start; }
.turn--client .turn__spk { color: var(--brand-success); }
.turn--client .turn__body { background: var(--brand-grey-light); border-radius: 3px 12px 12px 12px; }
/* Voice agent → right, indigo label, tinted bubble, tail top-right */
.turn--agent { justify-content: flex-end; }
.turn--agent .turn__wrap { align-items: flex-end; }
.turn--agent .turn__meta { justify-content: flex-end; }
.turn--agent .turn__spk { color: var(--brand-accent); }
.turn--agent .turn__body { background: var(--tint-accent); border-radius: 12px 3px 12px 12px; }
/* System note → centered, italic */
.turn--system { justify-content: center; }
.turn--system .turn__body { background: transparent; color: var(--brand-grey-text); font-style: italic; font-size: 11.5px; padding: 2px 0; text-align: center; }
/* Tool call → full-width dashed card */
.turn--tool { justify-content: stretch; }
.turn--tool .turn__wrap { max-width: 100%; width: 100%; }
.turn--tool .turn__body { background: #fff; border: 1px dashed var(--brand-grey); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12px; width: 100%; }
.turn--tool .tool-name { color: var(--brand-accent); font-weight: 600; }
.turn--tool .tool-io { color: var(--brand-grey-text); display: block; margin-top: 3px; word-break: break-all; }
/* ---- Quality ---- */
.quality-dim { margin-bottom: 12px; }
.quality-dim__head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.quality-dim__score { font-family: var(--font-mono); font-weight: 600; }
.quality-bar { height: 6px; border-radius: 3px; background: var(--brand-grey-light); margin: 5px 0; overflow: hidden; }
/* display:block, so the fill is not silently invisible when the bar is written
with spans (an inline element ignores width and height). */
.quality-bar__fill { display: block; height: 100%; border-radius: 3px; transition: width var(--transition-slow); }
.quality-dim__reason { font-size: 12px; color: var(--brand-grey-text); line-height: 1.4; }
/* ---- Cost / tech tables ---- */
.kv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kv-table td, .kv-table th { padding: 6px 10px; border-bottom: 1px solid var(--border-color); text-align: left; }
.kv-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-grey-text); font-weight: 600; }
.kv-table .num { font-family: var(--font-mono); text-align: right; }
/* ---- Config tables ---- */
.config-card { border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: #fff; padding: 20px 22px; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.form-actions { margin-top: 16px; display: flex; gap: 10px; }
.entity-row { border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: #fff; margin-bottom: 10px; overflow: hidden; }
.entity-row__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; }
.entity-row__body { padding: 4px 16px 16px; border-top: 1px solid var(--border-color); }
.entity-row__body[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--brand-grey-light); color: var(--brand-grey-text); font-size: 11.5px; padding: 2px 8px; border-radius: var(--radius-md); }
/* A trap read as an expectation would invert the row's meaning, so it never
shares the neutral chip. */
.chip--danger { background: var(--tint-danger); color: var(--brand-danger); }
/* ---- Sandbox ---- */
.sandbox-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.code-block { background: var(--brand-black); color: #e6e8ff; font-family: var(--font-mono); font-size: 12px; border-radius: var(--radius-md); padding: 14px; white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto; }
.warn-banner { background: var(--tint-warning); color: var(--brand-warning); font-size: 12.5px; padding: 8px 12px; border-radius: var(--radius-md); margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }
/* ---- Toast ---- */
.toast-stack { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 9px; padding: 10px 16px; background: var(--brand-black); color: #fff; border-radius: var(--radius-lg); box-shadow: var(--brand-shadow-lg); font-size: 13px; animation: mhc-toast .25s ease; }
.toast i { color: var(--brand-accent-variant); font-size: 17px; }
.toast.is-error i { color: var(--brand-danger); }
/* ---- Backdrop (mobile) ---- */
.app-backdrop { position: absolute; inset: 0; background: rgba(0,4,91,0.34); z-index: 20; animation: mhc-fadein .2s ease; display: none; }
/* ---- Segmented tabs (All / Active / Inactive; sandbox endpoint toggles) ---- */
.seg { display: inline-flex; gap: 2px; background: var(--brand-grey-light); border-radius: var(--radius-md); padding: 3px; }
.seg__btn { border: none; background: transparent; color: var(--brand-grey-text); font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; padding: 5px 13px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.seg__btn:hover { color: var(--brand-blue-text); }
.seg__btn.is-active { background: #fff; color: var(--brand-accent); font-weight: 600; box-shadow: var(--brand-shadow-sm); }
/* ---- Catalog toolbar (search + tabs + new) ---- */
.catalog-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; margin-bottom: 16px; flex-shrink: 0; }
.catalog-toolbar .search-box { flex: 1 1 220px; max-width: 320px; }
.catalog-toolbar .spacer { margin-left: auto; }
/* ---- Tag facet (case list): several tags picked at once, applied in one submit ---- */
/* The form lays out as if its children were the toolbar's own, so the panel can
take a row of its own below them: ordered last so the toolbar's trailing
button is not pushed past it, and never over the table it filters. */
.tag-filter { display: contents; }
.tag-panel { order: 1; flex-basis: 100%; padding: 14px 16px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); animation: mhc-fadein .2s ease; }
.tag-panel[hidden] { display: none; }
.tag-panel__opts { display: flex; flex-wrap: wrap; gap: 6px; max-height: 170px; overflow-y: auto; }
.tag-panel__foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.tag-panel__note { font-size: 11.5px; color: var(--brand-grey-text); margin-right: auto; }
/* A checkbox wearing the chip the tag is shown as everywhere else. */
.chip-check { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11.5px; padding: 3px 9px; border-radius: var(--radius-md); border: 1px solid var(--brand-grey); background: #fff; color: var(--brand-grey-text); cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-check:hover { border-color: var(--brand-accent-border-soft); color: var(--brand-blue-text); }
.chip-check:has(input:checked) { background: var(--tint-accent); border-color: var(--brand-accent); color: var(--brand-accent); font-weight: 600; }
.chip-check:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--brand-accent-ring); }
/* ---- Config: centered column & sections (General form) ---- */
.config-col { max-width: 768px; margin: 0 auto; width: 100%; }
.config-section { border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: #fff; padding: 20px 22px; margin-bottom: 16px; }
.config-section__title { font-size: 14px; font-weight: 600; color: var(--brand-black); margin: 0; }
.config-section__desc { font-size: 12.5px; color: var(--brand-grey-text); margin: 3px 0 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-lbl { font-size: 12px; font-weight: 500; color: var(--brand-blue-text); margin-bottom: 6px; display: block; }
.field-lbl .req { color: var(--brand-danger); margin-left: 2px; }
.field-full { width: 100%; }
.info-note { display: flex; align-items: center; gap: 8px; background: var(--tint-accent); color: var(--brand-accent); font-size: 12.5px; padding: 10px 12px; border-radius: var(--radius-md); margin-top: 16px; }
.info-note i { font-size: 15px; }
.info-note--danger { background: var(--tint-danger); color: var(--brand-danger); }
/* pill toggles (calling days) */
.pill-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-toggle span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 7px 13px; border: 1px solid var(--brand-grey); border-radius: var(--radius-md); font-size: 12.5px; font-weight: 500; color: var(--brand-blue-text); background: #fff; cursor: pointer; transition: all var(--transition-fast); }
.pill-toggle span:hover { border-color: var(--brand-accent-border-soft); }
.pill-toggle input:checked + span { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.pill-toggle input:focus-visible + span { box-shadow: 0 0 0 3px var(--brand-accent-ring); }
/* save footer — sticks to the bottom of the scrolling form so the actions stay
reachable. It floats (raised with a shadow) while content extends below, and
goes flat once the user scrolls to the end. margin-top:auto keeps it pinned to
the bottom when content is shorter than the viewport (already flat then). */
.form-footer { position: sticky; bottom: 0; margin: auto -28px 0; padding: 12px 28px; background: rgba(255,255,255,0.02); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--border-color); flex-shrink: 0; transition: box-shadow var(--transition-fast); }
.form-footer.is-floating { box-shadow: 0 -6px 18px -10px rgba(0,4,91,0.22); }
.form-footer__inner { max-width: 768px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.form-footer__note { margin-right: auto; font-size: 12px; color: var(--brand-grey-text); }
/* ---- Drawer (right-side panel for edit / new — replaces the modal) ---- */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(0,4,91,0.10); animation: mhc-fadein .16s ease; }
.drawer__panel {
position: absolute; top: 0; right: 0; bottom: 0; width: 480px; max-width: 92%;
background: #fff; box-shadow: var(--brand-shadow-lg); display: flex; flex-direction: column;
animation: mhc-slidein .22s ease;
}
@keyframes mhc-slidein { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
/* The panel's only child is the