/* Global base and the bridge to the Harmony design system.

   Every stylesheet in this app reads the legacy variable names below.
   Rather than rewrite thousands of rules, the names are kept and each one
   is pointed at a Harmony token, so the whole product inherits the system.
   New work should use the --color-* tokens from tokens.css directly.

   tokens.css must load before this file. */

:root {
  /* Surfaces. One background tint per screen region: nested tints flatten. */
  --bg-0: var(--color-neutral-100);   /* page ground        */
  --bg-1: var(--color-neutral-0);     /* raised surface     */
  --bg-2: var(--color-neutral-100);   /* subtle fill, hover */
  --bg-3: var(--color-neutral-200);   /* firmer fill, tracks */

  --border: var(--color-neutral-200);

  /* Text. Every step clears WCAG 2.2 AA on white. */
  --text:       var(--color-neutral-900);
  --text-dim:   var(--color-neutral-700);
  --text-muted: var(--color-neutral-600);

  /* The product's interactive blue is Harmony primary, not the gold accent.
     Accent is budgeted to one filled element per viewport and links plus
     active tabs would blow that budget on every screen. */
  --accent:   var(--color-primary-500);
  --accent-2: var(--color-primary-800);

  --danger:  var(--color-danger-600);
  --warning: var(--color-warning-600);
  --success: var(--color-success-600);

  /* Elevation is not a Harmony device. Only genuinely floating things
     (dialogs, menus, tooltips) carry the one permitted overlay shadow. */
  --shadow: none;
}

* { box-sizing: border-box; }

/* Geometric, not soft: strokes read as drawn with a technical pen. */
svg {
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-text);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
}

/* Three weights exist system wide: 300 display, 400 regular, 700 bold.
   500 and 600 are excluded deliberately, so normalise anything asking. */
h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 700; }

/* ============ Brand ============ */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.brand-logo {
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
  max-width: 100%;
}
.brand-logo--login {
  height: 64px;
  margin: 0 auto var(--space-4);
}

/* No brand mark exists for this system. The name is set in type. */
.brand-mark {
  width: 32px;
  height: 32px;
  background: var(--color-primary-800);
  display: grid;
  place-items: center;
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: var(--text-label-size);
}

.brand-name {
  font-family: var(--font-display);
  font-size: var(--text-heading-4-size);
  line-height: var(--text-heading-4-line);
  font-weight: 700;
}
.brand-name span { color: var(--accent); }

/* ============ Data grid overlay ============ */
/* Shown during upload and download. Progress is cosmetic; the overlay is
   dismissed by a real signal, a page reload or the fileDownload cookie. */
.data-overlay {
    /* Above .modal-backdrop (9999, transaction.css). Saving a remark happens
       from an open modal, and at 2000 the overlay rendered behind it. */
    position: fixed; inset: 0; z-index: 10000;
    display: none; place-items: center; padding: var(--space-24);
    background: rgba(5, 11, 24, 0.45);
}
.data-overlay.is-active { display: grid; }
.do-card {
    width: 100%; max-width: 460px;
    background: var(--bg-1);
    border: var(--border-width) solid var(--color-border-default);
    padding: var(--space-24);
    box-shadow: var(--shadow-overlay);
}
.do-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); }
.do-title { font-size: var(--text-heading-4-size); font-weight: 700; color: var(--text); }
.do-sub {
    margin-top: var(--space-4); font-size: var(--text-caption-size); color: var(--text-muted);
    max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.do-spinner {
    border-radius: 50%;
    width: 22px; height: 22px; display: inline-block; flex-shrink: 0;
    border: 3px solid var(--bg-3); border-top-color: var(--accent);
    animation: do-spin 0.8s linear infinite;
}
.do-track { margin: var(--space-16) 0; height: 6px; background: var(--bg-3); overflow: hidden; }
.do-fill {
    height: 100%; width: 0;
    background: var(--accent);
    transition: width 0.4s ease;
}
.do-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.do-stage {
    display: flex; align-items: center; gap: 11px; padding: 6px 0;
    font-size: var(--text-body-s-size); color: var(--text-muted); transition: color 0.25s;
}
.do-stage-mark {
    width: 16px; height: 16px; flex-shrink: 0; box-sizing: border-box;
    border: 2px solid var(--border);
    display: grid; place-items: center; color: var(--color-text-inverse);
    font-size: 12px; line-height: 1;
    transition: border-color 0.25s, background 0.25s;
}
.do-stage-mark::after { content: "\2713"; opacity: 0; transition: opacity 0.25s; }
.do-stage.is-active { color: var(--text); font-weight: 700; }
.do-stage.is-active .do-stage-mark { border-color: var(--accent); }
.do-stage.is-done .do-stage-mark { border-color: var(--success); background: var(--success); }
.do-stage.is-done .do-stage-mark::after { opacity: 1; }
.do-note {
    margin: var(--space-16) 0 0; font-size: var(--text-caption-size);
    line-height: var(--text-caption-line); color: var(--text-muted);
}
@keyframes do-spin { to { transform: rotate(360deg); } }