/* Hallmark · genre: modern-minimal · macrostructure: Workbench
 * design-system: design.md · designed-as-app · theme: Amytics / limestone, plum, copper
 * pre-emit critique: P5 H4 E4 S5 R5 V4
 * Typography: native system sans · code: native monospace
 * Audience: marketers · purpose: plan browser journeys and inspect real run data.
 */
body {
  font-optical-sizing: auto;
}
h1,
h2,
h3,
.brand {
  font-weight: 700;
}
h1 {
  letter-spacing: -0.04em;
  line-height: 1.12;
}
h2 {
  font-size: 1.375rem;
  letter-spacing: -0.025em;
}
h3 {
  letter-spacing: -0.015em;
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-weight: 550;
  padding-inline: var(--space-lg);
}
button .icon {
  width: 18px;
  height: 18px;
}
button.primary {
  padding-inline: var(--space-xl);
}
input,
select,
textarea {
  border-radius: var(--radius-sm);
}
label,
.field-label {
  font-weight: 500;
}
.hint,
label .hint {
  font-weight: 400;
}
.icon {
  stroke-width: 1.6;
}
.shell {
  grid-template-columns: clamp(264px, 16.5rem, 384px) minmax(0, 1fr);
}
.sidebar {
  --color-focus: var(--color-rail-focus);
  background: var(--color-rail);
  color: var(--color-rail-ink);
  border: 0;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  gap: var(--space-2xl);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: -0.045em;
  gap: var(--space-md);
}
.sidebar .brand {
  padding: 0;
}
.brand img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.workspace-identity {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block: 1px solid var(--color-rail-rule);
}
.workspace-monogram {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-rail-raised);
  color: var(--color-rail-ink);
  font-weight: 500;
}
.workspace-identity > div {
  min-width: 0;
}
.workspace-identity strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.workspace-identity > div > span {
  display: block;
  margin-top: var(--space-xs);
  color: var(--color-rail-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.sidebar nav {
  gap: var(--space-xl);
}
.nav-group {
  display: grid;
  gap: var(--space-xs);
}
.nav-label {
  color: var(--color-rail-muted);
  font-size: var(--text-xs);
  font-weight: 450;
  margin: 0 var(--space-md) var(--space-sm);
}
.nav-item {
  color: var(--color-rail-ink);
  font-size: var(--text-sm);
  font-weight: 400;
  border-radius: var(--radius-sm);
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-md);
}
.nav-item .icon {
  color: var(--color-rail-muted);
  width: 18px;
  height: 18px;
}
.nav-item.active {
  background: var(--color-rail-active);
  color: var(--color-rail-active-ink);
  font-weight: 550;
}
.nav-item.active .icon {
  color: inherit;
}
.nav-count {
  margin-left: auto;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.sidebar button.quiet {
  color: var(--color-rail-ink);
}
@media (hover: hover) {
  .nav-item:not(.active):hover,
  .sidebar button.quiet:hover {
    background: var(--color-rail-hover);
    color: var(--color-rail-ink);
  }
  .nav-item.active:hover {
    background: var(--color-rail-active);
    color: var(--color-rail-active-ink);
  }
}
.sidebar-bottom {
  padding: 0;
}
.allowance {
  border: 0;
  padding: 0 0 var(--space-xl);
}
.allowance-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  justify-content: space-between;
  font-size: var(--text-xs);
}
.allowance-heading strong {
  font-weight: 500;
}
.allowance-heading > span {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.allowance-total,
.allowance small {
  color: var(--color-rail-muted);
}
.allowance progress {
  display: block;
  height: 4px;
  width: 100%;
  margin: var(--space-md) 0 var(--space-sm);
  border: 0;
  border-radius: 0;
  background: var(--color-rail-rule);
  accent-color: var(--color-brand);
}
.allowance progress::-webkit-progress-bar {
  background: var(--color-rail-rule);
}
.allowance progress::-webkit-progress-value {
  background: var(--color-brand);
}
.allowance progress::-moz-progress-bar {
  background: var(--color-brand);
}
.account {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rail-rule);
}
.account-label {
  color: var(--color-rail-muted);
  font-size: var(--text-xs);
}
.account-label > span {
  display: block;
  margin-top: var(--space-xs);
  color: var(--color-rail-ink);
  font-size: var(--text-sm);
}
.account .quiet {
  width: 44px;
  padding: 0;
}
main.content {
  max-width: 1536px;
  padding: var(--space-page);
}
.pagehead {
  padding-block: var(--space-sm) 0;
  margin-bottom: var(--space-2xl);
  gap: var(--space-xl);
}
.pagehead p {
  font-size: var(--text-body);
  line-height: 1.5;
}
button.toolbar-button {
  border-radius: var(--radius-sm);
}
.metric-strip {
  background: transparent;
  border: 0;
  border-block: 1px solid var(--color-rule);
  border-radius: 0;
  padding: var(--space-xl) 0;
  margin-block: 0 var(--space-2xl);
}
.metric {
  padding: 0 var(--space-xl);
}
.metric:first-child {
  padding-left: 0;
}
.metric dt {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.metric dd {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  margin-top: var(--space-md);
}
.metric small {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.4;
  margin-top: var(--space-md);
}
.overview-grid {
  grid-template-columns: minmax(0, 1.85fr) minmax(240px, 1fr);
  gap: var(--space-2xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
}
.overview-grid > .panel {
  margin-bottom: 0;
}
.activity-panel .chart {
  height: 220px;
}
.panel-head {
  padding: var(--space-xl);
}
.panel {
  border-radius: var(--radius-lg);
}
.workspace-facts {
  min-width: 0;
}
.workspace-facts .panel-head {
  padding: var(--space-sm) 0 var(--space-xl);
}
.workspace-facts .panel-body {
  padding: 0;
}
.workspace-facts .details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}
.workspace-facts .details > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}
.workspace-facts .details > div:first-child {
  padding-top: 0;
}
.workspace-facts .details dt {
  font-size: var(--text-sm);
}
.workspace-facts .details dd {
  margin: 0;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.sample-note {
  margin-top: var(--space-xl);
}
.sample-note strong {
  font-size: var(--text-sm);
  font-weight: 550;
}
.sample-note p {
  margin-block: var(--space-xs) var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.sample-note button {
  background: transparent;
}
.list-label {
  background: var(--color-paper);
  color: var(--color-muted);
}
.list-row {
  padding: var(--space-lg) var(--space-xl);
}
.list-row .title {
  font-size: var(--text-body);
  font-weight: 550;
}
.badge {
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 450;
  padding: var(--space-xs) var(--space-sm);
}
.filterbar {
  gap: var(--space-lg);
}
.filterbar label {
  font-size: var(--text-sm);
}
.filter-feedback:empty {
  display: none;
}
.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.cards .panel-head {
  border-bottom: 1px solid var(--color-rule);
}
.cards .panel-body {
  padding-top: var(--space-xl);
}
.empty {
  padding: var(--space-3xl) var(--space-xl);
}
.empty .symbol {
  border-radius: var(--radius-md);
}
.empty h2 {
  font-size: 1.5rem;
}
.journey {
  padding-top: 0;
}
.step {
  border-radius: var(--radius-md);
}
.auth-card {
  max-width: 480px;
  border-radius: var(--radius-dialog);
  padding: var(--space-2xl);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: none;
}
.auth-card .brand {
  padding: 0 0 var(--space-2xl);
}
.auth-card h1 {
  font-size: 2rem;
}
.auth-card form {
  margin-top: var(--space-xl);
}
.auth-card .primary {
  width: 100%;
}
.auth-appearance {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-xl);
  margin-top: var(--space-xl);
}
#modal {
  border-radius: var(--radius-dialog);
}
.modal-head {
  border-bottom: 1px solid var(--color-rule);
}
.modal-body {
  padding-top: var(--space-xl);
}
.appearance-popover {
  border-radius: var(--radius-lg);
}
.footer {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-xl);
  margin-top: var(--space-3xl);
  gap: var(--space-lg);
  font-size: var(--text-xs);
}
.footer-brand {
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--color-ink);
  font-size: var(--text-body);
  letter-spacing: -0.025em;
}
.content-enter {
  animation: none;
}
.navigation-drawer {
  background: var(--color-rail);
  border: 0;
}
.navigation-drawer .sidebar {
  padding: var(--space-xl);
}
@media (max-width: 1180px) and (min-width: 769px) {
  .shell {
    grid-template-columns: clamp(236px, 14.75rem, 344px) minmax(0, 1fr);
  }
  .sidebar {
    padding-inline: var(--space-lg);
  }
  main.content {
    padding: var(--space-2xl);
  }
  .overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace-facts .details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-xl);
  }
  .workspace-facts .details > div {
    padding-block: 0 var(--space-md);
  }
  .sample-note {
    max-width: 60ch;
  }
  .metric {
    padding-inline: var(--space-lg);
  }
  .metric dd {
    font-size: 2.25rem;
  }
}
@media (max-width: 768px) {
  .shell {
    display: block;
  }
  main.content {
    padding: var(--space-md) var(--space-xl) var(--space-xl);
  }
  .pagehead {
    margin-bottom: var(--space-xl);
    gap: var(--space-lg);
  }
  .pagehead h1 {
    font-size: 1.875rem;
  }
  .pagehead .page-actions {
    gap: var(--space-sm);
  }
  .metric-strip {
    gap: var(--space-xl) 0;
    margin-bottom: var(--space-xl);
  }
  .metric {
    padding: 0 var(--space-lg);
  }
  .metric:nth-child(2n + 1) {
    padding-left: 0;
  }
  .metric dd {
    font-size: 2.25rem;
  }
  .metric small {
    margin-top: var(--space-sm);
  }
  .overview-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .workspace-facts .panel-head {
    padding-top: 0;
  }
  .workspace-facts .details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md) var(--space-xl);
  }
  .workspace-facts .details > div {
    display: block;
    padding: 0 0 var(--space-md);
  }
  .workspace-facts .details dd {
    margin-top: var(--space-xs);
  }
  .activity-panel .chart {
    height: 190px;
  }
  .auth-card {
    padding: var(--space-xl);
  }
  .footer {
    margin-top: var(--space-2xl);
  }
}
@media (max-width: 480px) {
  main.content {
    padding-inline: var(--space-lg);
  }
  .panel-head,
  .panel-body,
  .list-row {
    padding-inline: var(--space-lg);
  }
  .panel-head {
    padding-block: var(--space-lg);
  }
  .workspace-facts .panel-head,
  .workspace-facts .panel-body {
    padding-inline: 0;
  }
  .workspace-facts .panel-head {
    padding-top: 0;
  }
  .metric dt {
    min-height: 3em;
  }
  .metric dd {
    margin-top: var(--space-xs);
  }
  .footer {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-xs);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .nav-item.active {
    outline: 2px solid Highlight;
  }
  .allowance progress {
    border: 1px solid CanvasText;
  }
}

/* The rail can grow with enlarged text; tight mobile drawers wrap the brand. */
.allowance-heading {
  flex-wrap: wrap;
}
.sidebar .brand > span {
  flex-wrap: wrap;
  row-gap: var(--space-sm);
}
.navigation-drawer .brand {
  flex-wrap: wrap;
  row-gap: var(--space-sm);
}
.appearance-options {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr));
}
.navigation-drawer {
  width: min(336px, calc(100% - 16px));
  max-width: calc(100% - 16px);
  scrollbar-gutter: auto;
  overflow: clip;
}
.details dt {
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .panel .details {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Navigation refinement: calm hierarchy, native type, compact-screen drawer. */
h1,
h2,
h3,
.brand {
  font-weight: 600;
}
h1 {
  letter-spacing: -0.03em;
  line-height: 1.2;
}
h2 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
button,
.nav-item.active {
  font-weight: 500;
}
.brand {
  font-size: 1.375rem;
  letter-spacing: -0.035em;
}
.brand img {
  width: 28px;
  height: 28px;
}
.metric dd {
  font-size: 2.5rem;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.shell {
  grid-template-columns: clamp(232px, 14.5rem, 336px) minmax(0, 1fr);
}
.sidebar {
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  gap: var(--space-xl);
  border-right: 1px solid var(--color-rail-rule);
  overflow: clip;
}
.sidebar .brand {
  padding-inline: var(--space-md);
}
.sidebar .brand > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-xs);
  margin: calc(-1 * var(--space-xs));
  flex: 1;
}
.nav-item {
  flex-shrink: 0;
}
.nav-item .icon {
  width: 18px;
  height: 18px;
}
.nav-item.active {
  box-shadow: inset 0 0 0 1px var(--color-rail-rule);
}
.sidebar-bottom {
  margin-top: 0;
}
.account {
  margin: var(--space-md) var(--space-md) 0;
  padding-top: var(--space-sm);
  gap: var(--space-sm);
}
.account-name {
  color: var(--color-rail-muted);
  font-size: var(--text-sm);
}
.navigation-drawer .sidebar {
  padding: var(--space-lg) var(--space-md);
  gap: var(--space-lg);
}
.navigation-drawer .brand {
  padding-left: var(--space-md);
  padding-right: 0;
}
.navigation-drawer {
  width: min(320px, calc(100% - 16px));
}
@media (max-width: 1024px) {
  .shell {
    display: block;
  }
  .shell > .sidebar {
    display: none;
  }
  main.content {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
  }
  .pagehead {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "navigation utilities" "title title" "actions actions";
    gap: var(--space-lg);
    padding-top: 0;
    padding-bottom: var(--space-sm);
  }
  .pagehead .mobile-menu {
    display: inline-flex;
    margin-left: -8px;
  }
  .pagehead .page-actions {
    justify-content: flex-start;
  }
  .page-actions:not(:empty) + .toolbar-utilities {
    border: 0;
    padding: 0;
  }
}
@media (max-width: 768px) {
  .pagehead h1 {
    font-size: 1.75rem;
  }
  .metric dd {
    font-size: 2rem;
  }
}
@media (max-width: 480px) {
  main.content {
    padding-inline: var(--space-lg);
  }
}
@media (max-height: 600px) {
  .sidebar,
  .navigation-drawer .sidebar {
    gap: var(--space-md);
    padding-block: var(--space-md);
  }
}

/* Recorded visit evidence shares the workspace's existing tokens and controls. */
.visit-status,
.visit-step-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.visit-status > span:last-child {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.visit-artifacts {
  margin-block: var(--space-xl);
}
.visit-journey {
  margin-block: var(--space-xl);
}
.visit-steps {
  list-style: decimal;
  padding-left: var(--space-xl);
}
.visit-steps li {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-rule);
}
.visit-step-heading {
  justify-content: space-between;
}
.visit-steps p {
  margin-block: var(--space-xs);
}
.visit-url,
.visit-steps code {
  overflow-wrap: anywhere;
  min-width: 0;
}
.visit-url {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.visit-events,
.visit-issues {
  margin-block: var(--space-lg);
}