/* AI Hub kit: components. One stylesheet; load it and the banner, tokens and
 * fonts come with it:   <link rel="stylesheet" href="/kit/hub-kit.css">
 *
 * Every class is prefixed hub-. Modifiers use --, parts use __.
 * Copy rules: one short lede per page at most; extra detail goes in title=
 * tooltips; no em dashes; no emoji (icons come from icons.mjs).
 *
 * CATALOG (see /kit in the starter app for every one rendered)
 *
 * Frame
 *   .hub-page                 main column, 1180 shell, side gutters
 *   .hub-pagehead             page title block: h1.hub-title + p.hub-lede (+ .hub-pagehead__actions)
 *   .hub-pagehead--split      title left, actions right
 *   .hub-crumb                small "back to" link above a title
 *   .hub-section              vertical rhythm block; .hub-section__head > h2.hub-h2 + .hub-section__link
 *   .hub-grid-2/-3/-4         responsive equal columns; .hub-split = 2fr/1fr main + aside
 *   .hub-footer               site footer (rendered by layout())
 * Type
 *   .hub-title (Oswald page title)   .hub-h2 (section title)   .hub-h3 (card/sub title)
 *   .hub-lede   .hub-mono (Plex Mono caps label)   .hub-muted   .hub-num (tabular figures)
 * Actions
 *   .hub-btn (primary blue) --quiet --danger --ghost --sm; .hub-actions (row of buttons)
 *   .hub-link (inline text link with arrow icon)
 * Labels
 *   .hub-chip (+ --beta --onprem --frontier --internal in hub-bar.css)
 *   .hub-status + --ok --error --running --abandoned --needs-review --pending --approved --rejected
 *       markup: <span class="hub-status hub-status--ok"><i></i>OK</span>   (dot + word)
 *   .hub-sev + --high --medium --low   (finding severity, word + bar)
 *   .hub-avatar (initials circle) --sm
 * Data
 *   .hub-table-wrap > table.hub-table   (wraps scroll on narrow screens; page never does)
 *       th.hub-num / td.hub-num right-aligns figures; tr.hub-row-link + a.hub-rowlink makes a
 *       whole row clickable with JS off; .hub-table--compact; td .hub-cell-sub = second line
 *   .hub-kpis > .hub-kpi (.hub-kpi__label, .hub-kpi__value, .hub-kpi__meta)
 *   .hub-dl                   key/value facts grid (<dl><div><dt/><dd/></div></dl>)
 *   .hub-meter                inline bar, set style="--v:42%"
 *   .hub-timeline > li.hub-timeline__item[data-actor=ai|user|system]
 *   .hub-empty                empty state: icon + one line + optional action
 *   .hub-pager                pagination row (prev / "1-25 of 120" / next)
 * Input
 *   .hub-toolbar              GET filter form row: .hub-field--inline items + buttons
 *   .hub-form                 stacked form; .hub-field > .hub-field__label + .hub-input/.hub-select/.hub-textarea
 *   .hub-check                checkbox/radio + label
 *   .hub-tabs                 in-page link tabs (a[aria-current="page"])
 *   .hub-seg                  segmented control (links or radio labels)
 * Surfaces
 *   .hub-card (+ --flush for tables inside, --link hover lift)  .hub-card__head
 *   .hub-flash (+ --error)    one-line result message after a POST-redirect-GET
 *   .hub-callout              quiet tinted note box (use sparingly)
 */
@import url("hub-tokens.css");
@import url("hub-bar.css");

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--hub-ground);
  color: var(--hub-ink);
  font-family: var(--hub-font-body);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.hub-body { display: flex; flex-direction: column; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--hub-blue); text-decoration: none; }
a:hover { color: var(--hub-blue-press); }
input, button, textarea, select { font: inherit; color: inherit; }
::placeholder { color: var(--hub-ink-muted); }
:focus-visible { outline: 2px solid var(--hub-blue); outline-offset: 2px; border-radius: 4px; }
.hub-icon { flex: none; vertical-align: middle; }
.hub-sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
a.hub-sr-only:focus-visible { background: var(--hub-surface); border: 1px solid var(--hub-blue); border-radius: 8px; clip: auto; clip-path: none; height: auto; left: 12px; padding: 10px 14px; top: 12px; width: auto; z-index: 80; }

/* ----------------------------------------------------------------- frame */
.hub-page { flex: 1; margin: 0 auto; max-width: var(--hub-shell); padding: 0 var(--hub-gutter) 88px; width: 100%; }

.hub-pagehead { padding: 44px 0 26px; }
.hub-pagehead .hub-lede { margin-top: 12px; }
.hub-pagehead--split { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; }
.hub-pagehead__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.hub-crumb { align-items: center; color: var(--hub-ink-soft); display: inline-flex; font-size: 13px; gap: 6px; margin-bottom: 14px; }
.hub-crumb:hover { color: var(--hub-blue); }

.hub-section { padding-top: 36px; }
.hub-section:first-child { padding-top: 0; }
.hub-section__head { align-items: baseline; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 14px; }
.hub-section__link { align-items: center; display: inline-flex; flex: none; font-size: 13px; font-weight: 600; gap: 5px; }

.hub-grid-2, .hub-grid-3, .hub-grid-4 { display: grid; gap: 12px; min-width: 0; }
.hub-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub-split { display: grid; gap: 28px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }

.hub-footer { background: var(--hub-surface); border-top: 1px solid var(--hub-line); }
.hub-footer__inner {
  align-items: center; display: flex; flex-wrap: wrap; gap: 14px 20px; justify-content: space-between;
  margin: auto; max-width: var(--hub-shell); padding: 20px var(--hub-gutter);
}
.hub-footer span { color: var(--hub-ink-soft); font-size: 13px; }
.hub-footer nav { display: flex; flex-wrap: wrap; font-size: 13px; gap: 20px; }

/* ------------------------------------------------------------------ type */
.hub-title {
  font-family: var(--hub-font-display);
  font-size: clamp(30px, 4.2vw, 40px);
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1;
  text-transform: uppercase;
}
.hub-h2 { font-size: 17px; font-weight: 650; letter-spacing: -.005em; line-height: 1.3; }
.hub-h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.hub-lede { color: var(--hub-ink-2); font-size: 16.5px; max-width: 40em; text-wrap: pretty; }
.hub-mono { font-family: var(--hub-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.hub-muted { color: var(--hub-ink-soft); }
.hub-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- actions */
.hub-btn {
  align-items: center;
  background: var(--hub-blue);
  border: 1px solid var(--hub-blue);
  border-radius: var(--hub-radius-sm);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  line-height: 1.4;
  padding: 8px 16px;
  white-space: nowrap;
}
.hub-btn:hover { background: var(--hub-blue-press); border-color: var(--hub-blue-press); color: #fff; }
.hub-btn--quiet { background: var(--hub-surface); border-color: var(--hub-line-strong); color: var(--hub-ink-2); }
.hub-btn--quiet:hover { background: var(--hub-surface); border-color: var(--hub-blue); color: var(--hub-blue); }
.hub-btn--danger { background: var(--hub-surface); border-color: #e6c4c0; color: var(--hub-stop); }
.hub-btn--danger:hover { background: var(--hub-surface); border-color: var(--hub-stop); color: var(--hub-stop); }
.hub-btn--ghost { background: transparent; border-color: transparent; color: var(--hub-blue); padding-left: 8px; padding-right: 8px; }
.hub-btn--ghost:hover { background: var(--hub-tint); border-color: transparent; color: var(--hub-blue-press); }
.hub-btn--sm { font-size: 12.5px; gap: 6px; padding: 5px 11px; }
.hub-btn[disabled], .hub-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
.hub-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.hub-link { align-items: center; display: inline-flex; font-weight: 600; gap: 5px; }

/* ---------------------------------------------------------------- labels */
.hub-status {
  align-items: center;
  color: var(--hub-ink-2);
  display: inline-flex;
  font-family: var(--hub-font-mono);
  font-size: 10px;
  gap: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hub-status > i { background: currentColor; border-radius: 50%; flex: none; height: 6px; width: 6px; }
.hub-status--ok, .hub-status--approved, .hub-status--delivered { color: var(--hub-live); }
.hub-status--error, .hub-status--rejected { color: var(--hub-stop); }
.hub-status--needs-review, .hub-status--pending { color: var(--hub-caution); }
.hub-status--running { color: var(--hub-blue); }
.hub-status--running > i { animation: hub-pulse 1.6s ease-in-out infinite; }
.hub-status--abandoned, .hub-status--none, .hub-status--declined { color: var(--hub-ink-soft); }
.hub-status--accepted { color: var(--hub-live); }
.hub-status--denied { color: var(--hub-stop); }
.hub-status--open { color: var(--hub-caution); }
.hub-status--abandoned > i, .hub-status--declined > i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
@keyframes hub-pulse { 50% { opacity: .3; } }

.hub-sev { align-items: center; display: inline-flex; font-family: var(--hub-font-mono); font-size: 10px; gap: 7px; letter-spacing: .08em; text-transform: uppercase; }
.hub-sev::before { border-radius: 1px; content: ""; height: 12px; width: 3px; }
.hub-sev--high { color: var(--hub-stop); } .hub-sev--high::before { background: var(--hub-stop); }
.hub-sev--medium { color: var(--hub-caution); } .hub-sev--medium::before { background: var(--hub-caution); }
.hub-sev--low { color: var(--hub-ink-soft); } .hub-sev--low::before { background: var(--hub-line-strong); }

.hub-chip--ok { background: var(--hub-live-tint); border-color: var(--hub-live-line); color: var(--hub-live); }
.hub-chip--warn { background: var(--hub-caution-tint); border-color: var(--hub-caution-line); color: var(--hub-caution); }
.hub-chip--blue { background: var(--hub-tint); border-color: #b9d7ea; color: var(--hub-blue); }

.hub-avatar {
  background: var(--hub-tint);
  border-radius: 50%;
  color: var(--hub-blue);
  display: inline-grid;
  flex: none;
  font-family: var(--hub-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  height: 28px;
  place-items: center;
  width: 28px;
}
.hub-avatar--sm { font-size: 9px; height: 22px; width: 22px; }
.hub-person { align-items: center; display: inline-flex; gap: 9px; white-space: nowrap; }

/* ------------------------------------------------------------------ data */
.hub-table-wrap {
  position: relative; /* keeps .hub-sr-only header labels inside the scroll box */
  background: var(--hub-surface);
  border: 1px solid var(--hub-line);
  border-radius: var(--hub-radius);
  overflow-x: auto;
}
.hub-table { border-collapse: collapse; font-size: 13.5px; min-width: 640px; width: 100%; }
.hub-table th {
  background: var(--hub-surface);
  border-bottom: 1px solid var(--hub-line);
  color: var(--hub-ink-muted);
  font-family: var(--hub-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .08em;
  padding: 11px 16px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.hub-table th a { color: inherit; }
.hub-table th a:hover, .hub-table th[aria-sort] a { color: var(--hub-ink); }
.hub-table td { border-top: 1px solid var(--hub-hairline); color: var(--hub-ink-2); padding: 11px 16px; vertical-align: middle; }
.hub-table tbody tr:first-child td { border-top: 0; }
.hub-table .hub-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hub-table td.hub-strong { color: var(--hub-ink); font-weight: 600; }
.hub-table .hub-em { color: var(--hub-ink); font-weight: 600; }
.hub-table--nowrap td { white-space: nowrap; }
.hub-table .hub-clip .hub-cell-sub { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.hub-table .hub-when { color: var(--hub-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-cell-sub { color: var(--hub-ink-muted); display: block; font-size: 12px; margin-top: 1px; }
.hub-table--compact td { padding-bottom: 8px; padding-top: 8px; }
.hub-table tfoot td { border-top: 1px solid var(--hub-line); color: var(--hub-ink); font-weight: 600; }
/* Whole-row link that works with JS off: one real <a class="hub-rowlink"> in the
   row; its ::after covers the row. */
.hub-row-link { position: relative; }
.hub-row-link:hover td { background: #f8fafb; }
.hub-rowlink { color: var(--hub-ink); font-weight: 600; white-space: nowrap; }
.hub-rowlink::after { content: ""; inset: 0; position: absolute; }
.hub-rowlink:focus-visible { outline: none; }
.hub-rowlink:focus-visible::after { border-radius: 4px; outline: 2px solid var(--hub-blue); outline-offset: -2px; }

.hub-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.hub-kpi { background: var(--hub-surface); border: 1px solid var(--hub-line); border-radius: var(--hub-radius); padding: 16px 18px 15px; min-width: 0; }
.hub-kpi__label { color: var(--hub-ink-muted); display: block; font-family: var(--hub-font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.hub-kpi__value {
  color: var(--hub-ink);
  display: block;
  font-family: var(--hub-font-display);
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1.15;
  margin-top: 6px;
}
.hub-kpi__meta { color: var(--hub-ink-soft); display: block; font-size: 12.5px; margin-top: 2px; }

.hub-dl { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0; }
.hub-dl > div { border-top: 1px solid var(--hub-hairline); padding: 11px 16px 11px 0; min-width: 0; }
.hub-dl dt { color: var(--hub-ink-muted); font-family: var(--hub-font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.hub-dl dd { color: var(--hub-ink); font-size: 14px; margin: 3px 0 0; overflow-wrap: anywhere; }

.hub-meter { align-items: center; display: flex; gap: 10px; min-width: 120px; }
.hub-meter::before { background: linear-gradient(90deg, var(--hub-blue) var(--v, 0%), var(--hub-surface-soft) var(--v, 0%)); border-radius: 2px; content: ""; flex: 1; height: 6px; }

.hub-timeline { list-style: none; margin: 0; padding: 0; }
.hub-timeline__item { display: grid; gap: 0 14px; grid-template-columns: 74px 14px minmax(0, 1fr); padding-bottom: 16px; position: relative; }
.hub-timeline__item::before { background: var(--hub-line); bottom: 0; content: ""; left: 94px; position: absolute; top: 18px; width: 1px; }
.hub-timeline__item:last-child::before { display: none; }
.hub-timeline__time { color: var(--hub-ink-muted); font-family: var(--hub-font-mono); font-size: 11px; padding-top: 2px; text-align: right; }
.hub-timeline__dot { background: var(--hub-surface); border: 2px solid var(--hub-ink-muted); border-radius: 50%; height: 11px; margin-top: 5px; width: 11px; }
.hub-timeline__item[data-actor="ai"] .hub-timeline__dot { border-color: var(--hub-blue); }
.hub-timeline__item[data-actor="user"] .hub-timeline__dot { background: var(--hub-ink); border-color: var(--hub-ink); }
.hub-timeline__label { color: var(--hub-ink); font-size: 14px; font-weight: 550; }
.hub-timeline__detail { color: var(--hub-ink-soft); font-size: 13px; }

.hub-empty {
  align-items: center;
  background: var(--hub-surface);
  border: 1px dashed var(--hub-line-strong);
  border-radius: var(--hub-radius);
  color: var(--hub-ink-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}
.hub-empty > .hub-icon { color: var(--hub-ink-muted); }
.hub-empty p { font-size: 14.5px; max-width: 32em; }

.hub-pager { align-items: center; color: var(--hub-ink-soft); display: flex; font-size: 13px; gap: 14px; justify-content: space-between; padding: 14px 2px 0; }
.hub-pager__links { display: flex; gap: 8px; }

/* ----------------------------------------------------------------- input */
.hub-toolbar {
  align-items: flex-end;
  border-bottom: 1px solid var(--hub-line);
  border-top: 1px solid var(--hub-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 0;
}
.hub-toolbar__end { align-self: flex-end; margin-left: auto; }
.hub-toolbar > .hub-seg { align-self: flex-end; }
.hub-toolbar .hub-seg a { padding-bottom: 7px; padding-top: 7px; }
.hub-toolbar .hub-input, .hub-toolbar .hub-select { height: 36px; min-height: 0; }
.hub-toolbar .hub-field--inline .hub-select { min-width: 124px; }
.hub-field--grow { flex: 1 1 120px; }
.hub-field--grow .hub-input { min-width: 0; }
.hub-field--date .hub-input { min-width: 132px; }
.hub-toolbar .hub-select { max-width: 200px; }
.hub-field--narrow .hub-select { width: 140px; }
.hub-field { display: block; min-width: 0; }
.hub-field__label { color: var(--hub-ink-soft); display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.hub-field--inline .hub-field__label { color: var(--hub-ink-muted); font-family: var(--hub-font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .08em; margin-bottom: 4px; text-transform: uppercase; }
.hub-input, .hub-select, .hub-textarea {
  background: var(--hub-surface);
  border: 1px solid var(--hub-line-strong);
  border-radius: var(--hub-radius-sm);
  color: var(--hub-ink);
  font-size: 13.5px;
  min-height: 36px;
  padding: 7px 11px;
  width: 100%;
}
.hub-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7484' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding-right: 32px;
}
.hub-input:hover, .hub-select:hover, .hub-textarea:hover { border-color: #b6c4cf; }
.hub-input:focus, .hub-select:focus, .hub-textarea:focus { border-color: var(--hub-blue); box-shadow: 0 0 0 3px rgba(0, 99, 148, .12); outline: none; }
.hub-textarea { min-height: 88px; resize: vertical; }
.hub-field--inline .hub-select, .hub-field--inline .hub-input { min-width: 150px; }
.hub-form { display: grid; gap: 16px; max-width: 560px; }
.hub-form--wide { max-width: none; }
.hub-check { align-items: center; color: var(--hub-ink-2); cursor: pointer; display: inline-flex; font-size: 13.5px; gap: 8px; }
.hub-check input { accent-color: var(--hub-blue); height: 15px; margin: 0; width: 15px; }

.hub-tabs { box-shadow: inset 0 -1px 0 var(--hub-line); display: flex; gap: 2px; margin-bottom: 20px; overflow-x: auto; }
.hub-tabs a { border-bottom: 2px solid transparent; color: var(--hub-ink-soft); font-size: 13.5px; padding: 10px 12px; white-space: nowrap; }
.hub-tabs a:hover { color: var(--hub-ink); }
.hub-tabs a[aria-current="page"] { border-bottom-color: var(--hub-blue); color: var(--hub-ink); font-weight: 600; }
.hub-tabs .hub-count { color: var(--hub-ink-muted); font-family: var(--hub-font-mono); font-size: 10.5px; margin-left: 6px; }

.hub-seg { background: var(--hub-surface-soft); border-radius: 8px; display: inline-flex; gap: 2px; padding: 3px; }
.hub-seg a, .hub-seg label { border-radius: 6px; color: var(--hub-ink-soft); cursor: pointer; font-size: 13px; font-weight: 500; padding: 5px 12px; white-space: nowrap; }
.hub-seg a:hover, .hub-seg label:hover { color: var(--hub-ink); }
.hub-seg a[aria-current="true"], .hub-seg input:checked + span { background: var(--hub-surface); box-shadow: 0 1px 2px rgba(18, 36, 46, .12); color: var(--hub-ink); font-weight: 600; }
.hub-seg input { position: absolute; opacity: 0; pointer-events: none; }
.hub-seg label { padding: 0; }
.hub-seg label > span { border-radius: 6px; display: block; padding: 5px 12px; }

/* -------------------------------------------------------------- surfaces */
.hub-card { background: var(--hub-surface); border: 1px solid var(--hub-line); border-radius: var(--hub-radius); min-width: 0; padding: 20px; }
.hub-card--flush { padding: 0; overflow: hidden; }
.hub-card--flush .hub-table-wrap { border: 0; border-radius: 0; }
.hub-card--link { color: var(--hub-ink); display: block; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.hub-card--link:hover { border-color: var(--hub-blue); box-shadow: 0 8px 22px rgba(18, 36, 46, .1); color: var(--hub-ink); transform: translateY(-2px); }
.hub-card__head { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.hub-card--flush > .hub-card__head { border-bottom: 1px solid var(--hub-line); margin: 0; padding: 14px 16px; }

.hub-flash {
  align-items: center;
  background: var(--hub-live-tint);
  border: 1px solid var(--hub-live-line);
  border-radius: 10px;
  color: var(--hub-live);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
  margin-top: 20px;
  padding: 11px 15px;
}
.hub-flash--error { background: var(--hub-stop-tint); border-color: var(--hub-stop-line); color: var(--hub-stop); }
.hub-callout { background: var(--hub-tint); border-radius: 10px; color: var(--hub-ink-2); font-size: 14px; padding: 13px 16px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1000px) {
  .hub-grid-3, .hub-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-split { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hub-pagehead { padding-top: 30px; }
  .hub-grid-2, .hub-grid-3, .hub-grid-4 { grid-template-columns: 1fr; }
  .hub-section__head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .hub-toolbar .hub-field--inline { flex: 1 1 140px; }
  .hub-toolbar .hub-field--date { flex: 1 1 calc(50% - 6px); }
  .hub-field--date .hub-input, .hub-field--narrow .hub-select { min-width: 0; width: 100%; }
  .hub-toolbar .hub-select { max-width: none; }
  .hub-toolbar__end { margin-left: 0; }
  .hub-pagehead--split .hub-pagehead__actions { justify-content: flex-start; width: 100%; }
  .hub-timeline__item { grid-template-columns: 54px 14px minmax(0, 1fr); }
  .hub-timeline__item::before { left: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media print {
  .hub-header, .hub-footer, .hub-toolbar { display: none; }
  body { background: #fff; }
}