/* =====================================================================
   app.css - st-support product layer on top of carbon.css.
   Part 1 adds Carbon components missing from carbon.css (progress
   indicator, tearsheet, expandable rows, filter tags, header variants).
   Part 2 holds product patterns. Only Carbon tokens are used.
   ===================================================================== */

/* =========================== Part 1: Carbon additions =========================== */

/* Skip link */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 9999; padding: var(--cds-spacing-04) var(--cds-spacing-05); background: var(--cds-layer-01); color: var(--cds-link-primary); }
.skip-link:focus { left: 0; outline: 2px solid var(--cds-focus); }

/* Header: light variant (portal) */
.cds-header--light { background: var(--cds-layer-01); border-bottom-color: var(--cds-border-subtle-01); color: var(--cds-text-secondary); }
.cds-header--light .cds-header__name, .cds-header--light .cds-header__name:hover { color: var(--cds-text-primary); }
.cds-header--light .cds-header__action { color: var(--cds-icon-primary); }
.cds-header--light .cds-header__action:hover, .cds-header--light .cds-header__menu-item:hover { background: var(--cds-layer-hover-01); color: var(--cds-text-primary); }
.cds-header--light .cds-header__menu-item { color: var(--cds-text-secondary); }
.cds-header--light .cds-header__action:focus-visible, .cds-header--light .cds-header__menu-item:focus-visible { outline-color: var(--cds-focus); }
.portal-new { gap: var(--cds-spacing-03); color: var(--cds-link-primary) !important; }

/* Header: expandable search (Carbon HeaderGlobalAction search pattern) */
.hdr-search { display: flex; align-items: center; height: 100%; }
.hdr-search input {
  width: 0; height: 100%; padding: 0; border: 0; opacity: 0;
  background: #262626; color: #f4f4f4; font-size: 0.875rem;
  transition: width var(--cds-duration-moderate-01) var(--cds-ease-productive-standard), opacity var(--cds-duration-fast-02);
}
.hdr-search input::placeholder { color: #8d8d8d; }
.hdr-search.is-open input { width: 22rem; max-width: 50vw; padding: 0 var(--cds-spacing-05); opacity: 1; border-bottom: 1px solid #6f6f6f; }
.hdr-search.is-open input:focus { outline: 2px solid #fff; outline-offset: -2px; }
.hdr-search.is-open .cds-header__action { background: #262626; }

/* Side nav: count, rail (collapsed) mode, collapse button */
.cds-side-nav__items { list-style: none; }
.nav-count { font-family: var(--cds-font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.32px; color: var(--cds-text-secondary); }
.nav-count--attention { min-width: 1.25rem; padding: 0 0.375rem; border-radius: 0.625rem; background: var(--cds-support-warning); color: #161616; font-weight: 600; text-align: center; line-height: 1.25rem; }
.cds-side-nav__collapse {
  display: flex; align-items: center; gap: var(--cds-spacing-04); width: 100%; height: 3rem; padding: 0 var(--cds-spacing-05);
  border: 0; border-top: 1px solid var(--cds-border-subtle-01); background: transparent; color: var(--cds-text-secondary); font-size: 0.875rem;
}
.cds-side-nav__collapse:hover { background: var(--cds-background-hover); color: var(--cds-text-primary); }
html.rail { --cds-side-nav-width: 3rem; }
html.rail .cds-side-nav { overflow-x: hidden; }
html.rail .cds-side-nav__link-text, html.rail .nav-count, html.rail .cds-side-nav__collapse span { display: none; }
html.rail .cds-side-nav__section-title { height: 1px; padding: 0; margin: var(--cds-spacing-03) var(--cds-spacing-03); background: var(--cds-border-subtle-01); overflow: hidden; color: transparent; }
html.rail .cds-side-nav__link { justify-content: center; padding: 0; }
html.rail .nav-count--attention { display: block; position: absolute; top: 0.25rem; right: 0.375rem; min-width: 0.5rem; width: 0.5rem; height: 0.5rem; padding: 0; font-size: 0; }
html.rail .cds-side-nav__collapse { justify-content: center; padding: 0; }
html.rail .cds-side-nav__collapse .icon { transform: rotate(180deg); }
.nav-scrim { display: none; }
@media (max-width: 66rem) {
  html.rail { --cds-side-nav-width: 16rem; }
  html.rail .cds-side-nav__link-text, html.rail .nav-count { display: inline; }
  .cds-side-nav__collapse { display: none; }
  .nav-open .cds-side-nav { transform: none; }
  .nav-open .nav-scrim { display: block; position: fixed; inset: var(--cds-header-height) 0 0 0; z-index: 6999; background: var(--cds-overlay); }
  .hdr-search.is-open input { width: calc(100vw - 9rem); max-width: none; }
  .hdr-search.is-open ~ * { display: none; }
}

/* Header panels: notifications + account */
.np__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-04); padding: var(--cds-spacing-05); }
.np__list { list-style: none; border-top: 1px solid var(--cds-border-subtle-01); }
.np__list.unread-only .np__item[data-unread="false"] { display: none; }
.np__list.unread-only .np__day { display: none; }
.np__day { padding: var(--cds-spacing-04) var(--cds-spacing-05) var(--cds-spacing-02); font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-helper); }
.np__item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--cds-spacing-03); padding: var(--cds-spacing-04) var(--cds-spacing-05); color: var(--cds-text-secondary); text-decoration: none; position: relative; }
.np__item:hover { background: var(--cds-layer-hover-01); text-decoration: none; color: var(--cds-text-secondary); }
.np__item.is-unread { background: var(--cds-layer-02); }
.np__item.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cds-interactive); }
.np__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cds-layer-accent-01); color: var(--cds-icon-primary); }
.np__body { display: flex; flex-direction: column; gap: var(--cds-spacing-01); min-width: 0; }
.np__text { font-size: 0.875rem; color: var(--cds-text-primary); }
.np__text strong { font-weight: 600; }
.np__sub { font-size: 0.75rem; letter-spacing: 0.32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np__time { font-family: var(--cds-font-mono); font-size: 0.75rem; color: var(--cds-text-helper); }
.np__foot { display: flex; justify-content: space-between; padding: var(--cds-spacing-03); border-top: 1px solid var(--cds-border-subtle-01); }
.ap__who { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cds-spacing-02); padding: var(--cds-spacing-06) var(--cds-spacing-05) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-01); }
.ap__who .cds-avatar { margin-bottom: var(--cds-spacing-03); }
.ap__menu { list-style: none; padding: var(--cds-spacing-02) 0; }
.ap__state { font-size: 0.75rem; color: var(--cds-text-helper); }

/* Progress indicator (Carbon) */
.cds-progress { display: flex; list-style: none; width: 100%; }
.cds-progress__step { position: relative; flex: 1 1 0; min-width: 7rem; padding-top: var(--cds-spacing-03); border-top: 1px solid var(--cds-border-subtle-02); }
.cds-progress__step--complete, .cds-progress__step--current { border-top: 2px solid var(--cds-interactive); padding-top: calc(var(--cds-spacing-03) - 1px); }
.cds-progress__step-inner { display: flex; gap: var(--cds-spacing-03); padding-right: var(--cds-spacing-05); }
.cds-progress__step .icon { margin-top: 0.125rem; color: var(--cds-interactive); }
.cds-progress__step--incomplete .icon { color: var(--cds-icon-secondary); }
.cds-progress__step--invalid .icon { color: var(--cds-support-error); }
.cds-progress__label { font-size: 0.875rem; line-height: 1.28572; color: var(--cds-text-primary); }
.cds-progress__step--current .cds-progress__label { font-weight: 600; }
.cds-progress__step--incomplete .cds-progress__label { color: var(--cds-text-secondary); }
.cds-progress__optional { display: block; margin-top: var(--cds-spacing-01); font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-helper); }
.cds-progress--vertical { flex-direction: column; }
.cds-progress--vertical .cds-progress__step { border-top: 0; border-left: 1px solid var(--cds-border-subtle-02); padding: 0 0 var(--cds-spacing-07) var(--cds-spacing-04); min-width: 0; }
.cds-progress--vertical .cds-progress__step--complete, .cds-progress--vertical .cds-progress__step--current { border-left: 2px solid var(--cds-interactive); padding-left: calc(var(--cds-spacing-04) - 1px); }
.cds-progress--vertical .cds-progress__step:last-child { padding-bottom: 0; }
@media (max-width: 42rem) { .cds-progress:not(.cds-progress--vertical) { flex-direction: column; gap: var(--cds-spacing-03); } .cds-progress:not(.cds-progress--vertical) .cds-progress__step { min-width: 0; } }

/* Tearsheet (Carbon for IBM Products): large task overlay */
.cds-tearsheet {
  position: fixed; inset: var(--cds-spacing-09) 0 0 0; z-index: 8600; margin: 0 auto; width: calc(100% - 2 * var(--cds-spacing-10)); max-width: 90rem;
  display: grid; grid-template-rows: auto 1fr auto; background: var(--cds-layer-01); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transform: translateY(100%); visibility: hidden; transition: transform var(--cds-duration-moderate-02) var(--cds-ease-productive-exit), visibility 0s linear var(--cds-duration-moderate-02);
}
.cds-tearsheet.is-visible { transform: none; visibility: visible; transition: transform var(--cds-duration-moderate-02) var(--cds-ease-productive-entrance), visibility 0s; }
.cds-tearsheet__header { position: relative; padding: var(--cds-spacing-06) 4rem var(--cds-spacing-06) var(--cds-spacing-07); border-bottom: 1px solid var(--cds-border-subtle-01); }
.cds-tearsheet__label { font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-secondary); margin-bottom: var(--cds-spacing-02); }
.cds-tearsheet__title { font-size: 1.75rem; line-height: 1.28572; font-weight: 400; }
.cds-tearsheet__description { margin-top: var(--cds-spacing-03); color: var(--cds-text-secondary); max-width: 44rem; }
.cds-tearsheet__close { position: absolute; top: 0; right: 0; }
.cds-tearsheet__main { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 0; }
.cds-tearsheet__influencer { padding: var(--cds-spacing-07) var(--cds-spacing-06); border-right: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); overflow-y: auto; }
.cds-tearsheet__body { padding: var(--cds-spacing-07); overflow-y: auto; }
.cds-tearsheet__main--single { grid-template-columns: minmax(0, 1fr); }
.cds-tearsheet__footer { display: flex; justify-content: flex-end; height: 4rem; border-top: 1px solid var(--cds-border-subtle-01); }
.cds-tearsheet__footer > .cds-btn { height: 4rem; min-width: 12rem; align-items: flex-start; padding-top: var(--cds-spacing-05); }
.cds-tearsheet__footer > .cds-btn--ghost { margin-right: auto; }
@media (max-width: 66rem) {
  .cds-tearsheet { inset: var(--cds-header-height) 0 0 0; width: 100%; }
  .cds-tearsheet__main { grid-template-columns: 1fr; }
  .cds-tearsheet__influencer { border-right: 0; border-bottom: 1px solid var(--cds-border-subtle-01); }
  .cds-tearsheet__footer > .cds-btn { min-width: 0; flex: 1; }
}
.overlay-scrim { position: fixed; inset: 0; z-index: 8400; background: var(--cds-overlay); opacity: 0; visibility: hidden; transition: opacity var(--cds-duration-moderate-02); }
.overlay-scrim.is-visible { opacity: 1; visibility: visible; }

/* Data table: expandable rows, filter tags, toolbar actions */
.cds-data-table__expand { width: 3rem; padding: 0 0 0 var(--cds-spacing-03) !important; }
.cds-data-table__expand button {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--cds-icon-primary);
}
.cds-data-table__expand button:hover { background: var(--cds-layer-hover-01); }
.cds-data-table__expand .icon { transition: transform var(--cds-duration-fast-02) var(--cds-ease-productive-standard); }
.cds-data-table__expand button[aria-expanded="true"] .icon { transform: rotate(90deg); }
.cds-data-table tbody tr.is-expanded td { border-bottom-color: transparent; background: var(--cds-layer-hover-01); }
.cds-data-table tbody tr.cds-data-table__expanded-row td { background: var(--cds-layer-01); padding: 0 var(--cds-spacing-05) var(--cds-spacing-06) calc(3rem + var(--cds-spacing-05)); color: var(--cds-text-primary); }
.cds-data-table tbody tr.cds-data-table__expanded-row:hover td { background: var(--cds-layer-01); }
.cds-data-table tbody tr.is-expanded + tr.cds-data-table__expanded-row td { background: var(--cds-layer-hover-01); }
.filter-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-03); padding: var(--cds-spacing-04) var(--cds-spacing-05); background: var(--cds-layer-01); border-bottom: 1px solid var(--cds-border-subtle-01); font-size: 0.875rem; }
.filter-tags__label { color: var(--cds-text-secondary); margin-right: var(--cds-spacing-02); }
.cds-tag--filter { background: var(--cds-tag-background-gray); padding-right: 0; }
.cds-toolbar__divider { width: 1px; margin: var(--cds-spacing-04) 0; background: var(--cds-border-subtle-01); }
.cds-toolbar .cds-btn--ghost.cds-btn--icon-only { color: var(--cds-icon-primary); }
.cds-toolbar .cds-overflow .cds-menu { min-width: 14rem; }
.cds-batch-actions { background: var(--cds-button-primary); }
.cds-batch-actions__buttons { display: flex; align-items: stretch; height: 100%; }
.cds-batch-actions__buttons .cds-btn { background: transparent; color: var(--cds-text-on-color); min-height: 3rem; border: 0; }
.cds-batch-actions__buttons .cds-btn:hover { background: var(--cds-button-primary-hover); }
.cds-batch-actions__buttons .cds-btn .icon { position: static; }
.cds-batch-actions__buttons .cds-btn--cancel { border-left: 1px solid rgba(255, 255, 255, 0.4); }
.cds-data-table td.col-grow { width: 100%; max-width: 0; min-width: 14rem; }
/* A second growing column shares the spare width instead of squeezing the rest. */
.cds-data-table td.col-share { width: 50%; max-width: 0; min-width: 12rem; }
.cds-data-table .cds-data-table__expand, .cds-data-table .cds-data-table__checkbox { width: 3rem; min-width: 3rem; }
.cds-data-table th.is-narrow, .cds-data-table td.is-narrow { width: 1%; white-space: nowrap; }

/* Popover filter panel (used by table filter button) */
.filter-popover { position: absolute; top: 100%; right: 0; z-index: 9000; width: 20rem; background: var(--cds-layer-01); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.filter-popover__body { max-height: 60vh; overflow-y: auto; padding: var(--cds-spacing-05); }
.filter-popover__body .cds-fieldset + .cds-fieldset { margin-top: var(--cds-spacing-06); }
.filter-popover__footer { display: flex; }
.filter-popover__footer .cds-btn { flex: 1; max-width: none; }

/* =========================== Part 2: product patterns =========================== */

/* Page header band (Carbon for IBM Products PageHeader) */
.page-head { background: var(--cds-layer-01); border-bottom: 1px solid var(--cds-border-subtle-01); padding: var(--cds-spacing-05) var(--cds-spacing-07) 0; }
.page-head [data-crumbs-slot] { min-height: 1.25rem; margin-bottom: var(--cds-spacing-04); }
.page-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--cds-spacing-05); padding-bottom: var(--cds-spacing-06); }
.page-head__title { font-size: 1.75rem; line-height: 1.28572; font-weight: 400; }
.page-head__subtitle { margin-top: var(--cds-spacing-03); color: var(--cds-text-secondary); max-width: 48rem; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; }
.page-head__actions .cds-btn { max-width: none; }
/* Page actions share one size (Carbon md), whatever the page. */
.page-head__actions .cds-btn:not(.cds-btn--sm) { min-height: 2.5rem; padding-top: calc(0.625rem - 3px); padding-bottom: calc(0.625rem - 3px); }
.page-head .cds-tabs { margin-top: calc(-1 * var(--cds-spacing-03)); }
.page-head .cds-tabs__tab { border-bottom-color: transparent; }
.page-head .cds-tabs__tab[aria-selected="true"] { border-bottom-color: var(--cds-border-interactive); }
.page-head .cds-tabs__tab:first-child { margin-left: calc(-1 * var(--cds-spacing-05)); }
.page-body { padding: var(--cds-spacing-06) var(--cds-spacing-07) var(--cds-spacing-10); }
.page-body--narrow { max-width: 60rem; }
.page-body--flush { padding: 0; }
@media (max-width: 42rem) {
  .page-head { padding: var(--cds-spacing-05) var(--cds-spacing-05) 0; }
  .page-head__title { font-size: 1.25rem; line-height: 1.4; }
  .page-body { padding: var(--cds-spacing-05) var(--cds-spacing-05) var(--cds-spacing-09); }
}
.section-title { font-size: 1rem; font-weight: 600; line-height: 1.375; }
.section-lead { margin-top: var(--cds-spacing-02); color: var(--cds-text-secondary); font-size: 0.875rem; max-width: 44rem; }
.section + .section { margin-top: var(--cds-spacing-08); }
.section > .section-title + * , .section > .section-lead + * { margin-top: var(--cds-spacing-05); }

/* Grid helpers on the Carbon 2x grid */
.grid { display: grid; gap: var(--cds-spacing-05); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-1 { gap: 1px; background: var(--cds-border-subtle-01); border: 1px solid var(--cds-border-subtle-01); }
.grid--main-aside { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--cds-spacing-06); align-items: start; }
@media (max-width: 66rem) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--main-aside { grid-template-columns: 1fr; } }
@media (max-width: 42rem) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Settings-style form section */
.form-section { display: grid; grid-template-columns: minmax(12rem, 20rem) minmax(0, 36rem); gap: var(--cds-spacing-07); padding: var(--cds-spacing-07) 0; border-bottom: 1px solid var(--cds-border-subtle-01); }
.form-section:first-child { padding-top: 0; }
.form-section__title { font-size: 1rem; font-weight: 600; line-height: 1.375; }
.form-section__desc { margin-top: var(--cds-spacing-03); font-size: 0.875rem; color: var(--cds-text-secondary); }
@media (max-width: 66rem) { .form-section { grid-template-columns: minmax(0, 1fr); gap: var(--cds-spacing-05); } }
.save-bar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: 1px; margin: var(--cds-spacing-07) calc(-1 * var(--cds-spacing-07)) 0; padding-left: var(--cds-spacing-07); background: var(--cds-layer-01); border-top: 1px solid var(--cds-border-subtle-01); }
.save-bar__msg { margin-right: auto; font-size: 0.875rem; color: var(--cds-text-secondary); }

/* ---------- Ticket vocabulary ---------- */
.tn { font-family: var(--cds-font-mono); font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-secondary); white-space: nowrap; }
.mono { font-family: var(--cds-font-mono); font-size: 0.75rem; letter-spacing: 0.32px; }
.muted { color: var(--cds-text-helper); }
/* Priority as Carbon status shape + text: high = diamond (error), normal = circle (info), low = outlined circle */
.prio { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); white-space: nowrap; color: var(--cds-text-primary); }
.prio::before { content: ""; width: 0.625rem; height: 0.625rem; flex: none; }
.prio--high::before { background: var(--cds-support-error); transform: rotate(45deg) scale(0.85); }
.prio--normal::before { border-radius: 50%; background: var(--cds-support-info); }
.prio--low::before { border-radius: 50%; border: 1.5px solid var(--cds-icon-secondary); }
.pending-meta { display: block; margin-top: var(--cds-spacing-01); font-family: var(--cds-font-mono); font-size: 0.75rem; color: var(--cds-text-helper); }
.pending-meta--late { color: var(--cds-text-error); }
.who { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); white-space: nowrap; }
.t-title { display: block; color: var(--cds-text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.t-title:hover { color: var(--cds-link-primary); }
.t-sub { display: block; margin-top: var(--cds-spacing-01); font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
mark { background: var(--cds-highlight); color: inherit; padding: 0 1px; }
.preview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cds-spacing-05); align-items: start; padding-top: var(--cds-spacing-04); }
.preview__quote { font-size: 0.875rem; line-height: 1.42857; color: var(--cds-text-primary); max-width: 52rem; }
.preview__meta { font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-helper); margin-bottom: var(--cds-spacing-02); }

/* ---------- Ticket detail ---------- */
/* Ticket header: the standard page head, with the number and state next to the title. */
.ticket-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-03) var(--cds-spacing-04); }
.ticket-title__number { color: var(--cds-text-secondary); }
/* Ticket properties: stacked fields in the side column, explicit save */
.props__field + .props__field { margin-top: var(--cds-spacing-05); }
.props .cds-label { margin-bottom: var(--cds-spacing-03); }
.props__save { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cds-spacing-03); margin-top: var(--cds-spacing-05); }
.ticket-cols { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--cds-spacing-07); padding: var(--cds-spacing-06) var(--cds-spacing-07) var(--cds-spacing-10); align-items: start; }
@media (max-width: 66rem) {
  .ticket-cols { grid-template-columns: 1fr; }
  /* One column: the ticket fields and context come first, side by side where they fit. */
  .ticket-side { order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--cds-spacing-05); align-items: start; }
  .ticket-side .ctx + .ctx { margin-top: 0; }
}
@media (max-width: 42rem) { .ticket-cols { padding: var(--cds-spacing-05) var(--cds-spacing-05) var(--cds-spacing-09); } }

/* Conversation timeline */
.tl { list-style: none; position: relative; }
.tl__item { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--cds-spacing-04); padding-bottom: var(--cds-spacing-06); }
.tl__item::before { content: ""; position: absolute; left: 1rem; top: 2.25rem; bottom: 0.25rem; width: 1px; background: var(--cds-border-subtle-02); }
.tl__item:last-child::before { display: none; }
.tl__event { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--cds-spacing-04); align-items: center; padding-bottom: var(--cds-spacing-06); font-size: 0.875rem; color: var(--cds-text-secondary); }
.tl__event::before { content: ""; position: absolute; left: 1rem; top: 1.5rem; bottom: 0.25rem; width: 1px; background: var(--cds-border-subtle-02); }
.tl__event-dot { display: grid; place-items: center; width: 2rem; height: 1.5rem; color: var(--cds-icon-secondary); }
.tl__event strong { color: var(--cds-text-primary); font-weight: 600; }
.msg { background: var(--cds-layer-01); min-width: 0; }
.msg__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cds-spacing-02) var(--cds-spacing-03); padding: var(--cds-spacing-04) var(--cds-spacing-05) 0; }
.msg__author { font-weight: 600; color: var(--cds-text-primary); }
.msg__detail { font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-secondary); }
.msg__time { margin-left: auto; font-family: var(--cds-font-mono); font-size: 0.75rem; color: var(--cds-text-helper); white-space: nowrap; }
.msg__body { padding: var(--cds-spacing-04) var(--cds-spacing-05) var(--cds-spacing-05); font-size: 0.875rem; line-height: 1.42857; }
.msg__body p + p { margin-top: var(--cds-spacing-04); }
.msg__body .sig { margin-top: var(--cds-spacing-05); padding-top: var(--cds-spacing-03); border-top: 1px solid var(--cds-border-subtle-01); color: var(--cds-text-secondary); font-size: 0.75rem; letter-spacing: 0.32px; }
.msg__files { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03); padding: 0 var(--cds-spacing-05) var(--cds-spacing-05); }
.msg__foot { display: flex; align-items: center; gap: var(--cds-spacing-03); padding: var(--cds-spacing-03) var(--cds-spacing-05); border-top: 1px solid var(--cds-border-subtle-01); font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-helper); }
.msg__foot--ok > .icon { color: var(--cds-support-success); }
.msg__foot--warning { color: var(--cds-text-secondary); }
.msg__foot--warning > .icon { color: var(--cds-support-warning); }
.msg__foot--error { color: var(--cds-text-error); }
.msg__meta { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--cds-spacing-03); padding: var(--cds-spacing-02) var(--cds-spacing-05) 0; font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-secondary); }
.msg__meta dd { min-width: 0; overflow-wrap: anywhere; }
.msg__html { overflow-x: auto; overflow-wrap: anywhere; }
.msg__html img { max-width: 100%; height: auto; }
.msg__html p, .msg__html ul, .msg__html ol, .msg__html table, .msg__html blockquote, .msg__html pre { margin-bottom: var(--cds-spacing-04); }
.msg__html ul, .msg__html ol { padding-left: var(--cds-spacing-06); }
.msg__html ul { list-style: disc; }
.msg__html ol { list-style: decimal; }
.msg__html blockquote { padding-left: var(--cds-spacing-04); border-left: 2px solid var(--cds-border-subtle-01); color: var(--cds-text-secondary); }
.msg__html a { color: var(--cds-link-primary); }
.msg__html pre { font-family: var(--cds-font-mono); white-space: pre-wrap; }
.msg--internal { background: transparent; outline: 1px dashed var(--cds-border-strong-01); outline-offset: -1px; }
.msg--internal .msg__body { color: var(--cds-text-primary); }
.msg--phone { box-shadow: inset 3px 0 0 var(--cds-tag-color-teal); }
.msg--agent { box-shadow: inset 3px 0 0 var(--cds-interactive); }
.file-chip { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); height: 2rem; padding: 0 var(--cds-spacing-04); background: var(--cds-layer-02); color: var(--cds-text-primary); font-size: 0.875rem; text-decoration: none; }
.file-chip:hover { background: var(--cds-layer-hover-02); text-decoration: none; color: var(--cds-text-primary); }
.file-chip .mono { color: var(--cds-text-helper); }

/* Reply box */
.reply { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--cds-spacing-04); }
.reply__box { background: var(--cds-layer-01); min-width: 0; }
.reply__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cds-spacing-03); padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-01); }
.reply__note { padding: var(--cds-spacing-03) var(--cds-spacing-05); font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-secondary); display: flex; gap: var(--cds-spacing-03); align-items: center; border-bottom: 1px solid var(--cds-border-subtle-01); }
.reply__to { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-03); padding: var(--cds-spacing-03) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-01); font-size: 0.875rem; color: var(--cds-text-secondary); }
.reply__text { display: block; width: 100%; min-height: 8rem; padding: var(--cds-spacing-05); border: 0; resize: vertical; background: transparent; color: var(--cds-text-primary); line-height: 1.42857; }
.reply__text:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.reply__text::placeholder { color: var(--cds-text-placeholder); }
.reply__files { padding: 0 var(--cds-spacing-05) var(--cds-spacing-04); }
.reply__files .cds-btn { margin-left: calc(-1 * var(--cds-spacing-05)); }
.reply .cds-file-uploader__item { background: var(--cds-layer-02); }
.reply__bar { display: flex; flex-wrap: wrap; align-items: stretch; border-top: 1px solid var(--cds-border-subtle-01); }
.reply__bar .cds-btn--primary { margin-left: auto; }
.reply__bar .cds-select { width: auto; }
.reply__bar .cds-dropdown__trigger { height: 3rem; border-bottom: 0; background: transparent; }
.reply__bar .cds-dropdown__trigger:hover { background: var(--cds-layer-hover-01); }
.reply__box[data-value="internal_note"] { background: transparent; outline: 1px dashed var(--cds-border-strong-01); outline-offset: -1px; }

/* Context column cards */
.ctx { background: var(--cds-layer-01); }
.ctx + .ctx { margin-top: var(--cds-spacing-05); }
.grid > .ctx + .ctx { margin-top: 0; }
.ctx__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-03); padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-01); }
.ctx__title { font-size: 0.875rem; font-weight: 600; }
.ctx__body { padding: var(--cds-spacing-05); }
.ctx__list { list-style: none; }
.ctx__list li + li { border-top: 1px solid var(--cds-border-subtle-01); }
.ctx__list a { display: block; padding: var(--cds-spacing-04) var(--cds-spacing-05); color: var(--cds-text-primary); text-decoration: none; }
.ctx__list a:hover { background: var(--cds-layer-hover-01); text-decoration: none; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--cds-spacing-03) var(--cds-spacing-05); font-size: 0.875rem; }
.kv > dt { color: var(--cds-text-secondary); }
.kv > dd { min-width: 0; color: var(--cds-text-primary); overflow-wrap: anywhere; }

/* History log (History tab) */
.log { width: 100%; border-collapse: collapse; background: var(--cds-layer-01); font-size: 0.875rem; }
.log td { padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-01); vertical-align: top; }
.log td:first-child { width: 9rem; font-family: var(--cds-font-mono); font-size: 0.75rem; color: var(--cds-text-helper); white-space: nowrap; }
.log del { color: var(--cds-text-helper); }

/* ---------- Split view (triage inbox) ---------- */
.split { display: grid; grid-template-columns: 24rem minmax(0, 1fr); height: calc(100vh - var(--cds-header-height)); }
.split__list { overflow-y: auto; background: var(--cds-layer-01); border-right: 1px solid var(--cds-border-subtle-01); }
.split__detail { overflow-y: auto; }
@media (max-width: 66rem) { .split { grid-template-columns: 1fr; height: auto; } .split__list { border-right: 0; border-bottom: 1px solid var(--cds-border-subtle-01); max-height: 50vh; } }
.inbox-item { display: block; width: 100%; padding: var(--cds-spacing-05); border: 0; border-bottom: 1px solid var(--cds-border-subtle-01); background: transparent; color: var(--cds-text-primary); text-align: left; text-decoration: none; position: relative; }
.inbox-item:hover { background: var(--cds-layer-hover-01); text-decoration: none; color: var(--cds-text-primary); }
.inbox-item[aria-current="true"] { background: var(--cds-layer-selected-01); }
.inbox-item[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cds-border-interactive); }

/* ---------- Stats ---------- */
.stat { background: var(--cds-layer-01); padding: var(--cds-spacing-05); }
.stat__label { font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-secondary); }
.stat__value { margin-top: var(--cds-spacing-04); font-size: 2rem; line-height: 1.25; font-weight: 300; font-variant-numeric: tabular-nums; }
.stat__note { margin-top: var(--cds-spacing-02); font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-helper); }

/* ---------- Status ---------- */
.status { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); white-space: nowrap; }
.status .icon { flex: none; }
.status--ok .icon { color: var(--cds-support-success); }
.status--error .icon { color: var(--cds-support-error); }
.status--warning .icon { color: var(--cds-support-warning); }
.status--off .icon { color: var(--cds-icon-secondary); }

/* ---------- Empty state ---------- */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cds-spacing-04); padding: var(--cds-spacing-10) var(--cds-spacing-07); }
.empty .icon { width: 3rem; height: 3rem; color: var(--cds-icon-secondary); }
.empty__title { font-size: 1.25rem; line-height: 1.4; }
.empty__body { color: var(--cds-text-secondary); max-width: 30rem; }

/* ---------- Code / secrets ---------- */
.code-snippet { display: flex; align-items: stretch; background: var(--cds-layer-02); }
.code-snippet code { flex: 1; padding: var(--cds-spacing-04) var(--cds-spacing-05); font-size: 0.875rem; letter-spacing: 0.32px; overflow-x: auto; white-space: nowrap; }
.code-snippet .cds-btn { min-height: 2.5rem; }

/* ---------- Login (Carbon login pattern, two steps) ---------- */
.login { position: relative; min-height: 100vh; display: flex; flex-direction: column; background: var(--cds-background); overflow: hidden; }
.login__bar { position: relative; z-index: 1; height: var(--cds-header-height); display: flex; align-items: center; padding: 0 var(--cds-spacing-05); font-size: 0.875rem; color: var(--cds-text-primary); }
.login__main { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--cds-spacing-07) var(--cds-spacing-05) calc(var(--cds-header-height) + var(--cds-spacing-07)); }
.login__form { width: 100%; max-width: 26rem; background: var(--cds-layer-01); }
.login-bg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cds-border-subtle-00); pointer-events: none; }
@media (max-width: 42rem) { .login-bg { display: none; } }
.login__section { padding: var(--cds-spacing-05); }
.login__submit { margin-top: var(--cds-spacing-07); }
.login__title { font-size: 1.75rem; line-height: 1.28572; font-weight: 400; }
.login__divider { border-top: 1px solid var(--cds-border-subtle-01); }
.login__foot { padding: var(--cds-spacing-05); font-size: 0.875rem; color: var(--cds-text-secondary); }
.login__foot--help { border-top: 1px solid var(--cds-border-subtle-01); }
@media (max-width: 66rem) { .login__form { grid-column: 1 / -1; margin: 0 auto; width: 100%; } }

/* ---------- Portal ---------- */
.portal-hero { background: var(--cds-layer-01); border-bottom: 1px solid var(--cds-border-subtle-01); }
.portal-hero__inner, .portal-wrap { max-width: 72rem; margin: 0 auto; padding: var(--cds-spacing-07) var(--cds-spacing-05); }
.portal-hero__inner { padding-bottom: 0; }
.portal-wrap { padding-bottom: var(--cds-spacing-10); }
.portal-cols { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--cds-spacing-07); align-items: start; }
@media (max-width: 66rem) { .portal-cols { grid-template-columns: 1fr; } }
.req-list { list-style: none; background: var(--cds-layer-01); }
.req { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cds-spacing-02) var(--cds-spacing-05); padding: var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-01); color: var(--cds-text-primary); text-decoration: none; }
.req:hover { background: var(--cds-layer-hover-01); text-decoration: none; color: var(--cds-text-primary); }
.req__title { font-size: 1rem; font-weight: 600; line-height: 1.375; }
.req__meta { font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-text-secondary); }
.req__side { grid-row: span 2; display: flex; flex-direction: column; align-items: flex-end; gap: var(--cds-spacing-03); }
.req__new { display: inline-flex; align-items: center; gap: var(--cds-spacing-02); font-size: 0.75rem; letter-spacing: 0.32px; color: var(--cds-link-primary); font-weight: 600; }
.req__new::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cds-interactive); }
@media (max-width: 42rem) { .req { grid-template-columns: 1fr; } .req__side { grid-row: auto; flex-direction: row; align-items: center; justify-content: space-between; } }
.cds-menu.filter-popover { max-width: none; padding: 0; text-align: left; }
.cds-toolbar .cds-overflow { position: relative; }
/* Content switcher built from radios (form use) */
.cds-content-switcher__btn { cursor: pointer; }
.cds-content-switcher__btn:has(input:checked) { background: var(--cds-layer-selected-inverse); color: var(--cds-text-inverse); }
.cds-content-switcher__btn:has(input:focus-visible) { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
/* Portal header at small widths: keep brand padding, keep "New request" on one line */
.cds-header--light .cds-header__name { padding-left: var(--cds-spacing-05); }
.portal-new { white-space: nowrap; }
@media (max-width: 42rem) {
  .cds-header--light .cds-header__name { padding-right: var(--cds-spacing-03); }
  .cds-header--light .cds-header__name-prefix { display: none; }
  .portal-new { padding: 0 var(--cds-spacing-04); }
}

/* ---------- Brand logo ---------- */
/* Black logo on light surfaces, white logo on dark ones. The header is always dark. */
.brand-logo { display: block; width: auto; height: 1rem; margin-right: var(--cds-spacing-03); }
.brand-logo--on-dark { display: none; }
html[data-theme="g100"] .brand-logo--on-light { display: none; }
html[data-theme="g100"] .brand-logo--on-dark { display: block; }

.cds-content-switcher__btn:has(input:disabled) { color: var(--cds-text-disabled); border-color: var(--cds-border-disabled); background: transparent; cursor: not-allowed; }

/* Wide screens: page content stops at Carbon's maximum width (99rem = 1584px, gutters
   included) and the rest is margin. The header and body backgrounds still span the page. */
@media (min-width: 100rem) {
  .page-head, .page-body:not(.page-body--narrow), .ticket-cols {
    padding-right: max(var(--cds-spacing-07), calc(100% - 99rem + var(--cds-spacing-07)));
  }
}

/* ---------- Notifications: header bell and panel ---------- */
.notif-btn { position: relative; }
.notif-badge {
  position: absolute; top: 0.375rem; left: calc(50% + 0.125rem);
  min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: 0.5rem;
  background: var(--cds-support-error); color: var(--cds-text-on-color);
  font-size: 0.75rem; line-height: 1rem; font-weight: 400; text-align: center; pointer-events: none;
}
.notif-badge[hidden] { display: none; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item {
  display: flex; gap: var(--cds-spacing-04); padding: var(--cds-spacing-04) var(--cds-spacing-05);
  color: var(--cds-text-primary); border-bottom: 1px solid var(--cds-border-subtle-01);
}
.notif-item:hover { background: var(--cds-layer-hover-01); color: var(--cds-text-primary); text-decoration: none; }
.notif-item:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.notif-item.is-unread { box-shadow: inset 3px 0 0 var(--cds-border-interactive); }
.notif-item > .icon { flex: none; margin-top: 0.125rem; color: var(--cds-icon-secondary); }
.notif-item__body { display: flex; flex-direction: column; gap: var(--cds-spacing-01); min-width: 0; }
.notif-item__text { font-size: 0.875rem; line-height: 1.28572; letter-spacing: 0.16px; }
.notif-item.is-unread .notif-item__text { font-weight: 600; }
.notif-item__ticket { font-size: 0.75rem; line-height: 1.33333; letter-spacing: 0.32px; color: var(--cds-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item__time { font-size: 0.75rem; line-height: 1.33333; letter-spacing: 0.32px; color: var(--cds-text-helper); }
.notif-empty { display: flex; flex-direction: column; gap: var(--cds-spacing-03); padding: var(--cds-spacing-07) var(--cds-spacing-05); }
.notif-empty > .icon { color: var(--cds-icon-secondary); margin-bottom: var(--cds-spacing-03); }
.prefs-table td.is-check, .prefs-table th.is-check { width: 5rem; padding-left: var(--cds-spacing-03); padding-right: var(--cds-spacing-03); text-align: center; }
.prefs-table .cds-checkbox { justify-content: center; }
.prefs-table .t-title, .prefs-table .t-sub { white-space: normal; }

/* ---------- Help center ---------- */
/* Full-width bands, content centred. */
.portal .page-head, .portal .page-body {
  padding-left: max(var(--cds-spacing-07), calc((100% - 72rem) / 2));
  padding-right: max(var(--cds-spacing-07), calc((100% - 72rem) / 2));
}
.portal .page-body--narrow { max-width: none; }
.portal .page-body--narrow > * { max-width: 52rem; }
/* No side-nav toggle in the help center, so the name keeps its own gutter. */
.portal .cds-header__name { padding-left: var(--cds-spacing-05); }
@media (max-width: 42rem) {
  .portal .page-head, .portal .page-body { padding-left: var(--cds-spacing-05); padding-right: var(--cds-spacing-05); }
  .portal .cds-data-table .is-numeric { display: none; }
}
.reply__bar--end { justify-content: flex-end; }

/* A read-only value with a copy button (new API token). */
.copy-field { display: flex; width: 100%; }
.copy-field .cds-text-input { flex: 1; min-width: 0; }
.copy-field .cds-btn { flex: none; }
.tokens-table .t-title, .tokens-table .t-sub { white-space: normal; }
@media (max-width: 42rem) {
  .tokens-table .hide-sm { display: none; }
  .tokens-table td, .tokens-table th { white-space: normal; }
  .cds-data-table.tokens-table td.col-grow { min-width: 8rem; }
  .tokens-table td.is-narrow { padding-left: var(--cds-spacing-03); padding-right: var(--cds-spacing-03); }
}