@layer tokens, base, components;

@layer tokens {
  :root {
    --color-primary: #00865A;
    --color-primary-dark: #075D43;
    --color-primary-soft: #DCEFE7;
    --color-accent: #C5A34B;
    --color-surface: #F8FAF8;
    --color-surface-raised: #FFFFFF;
    --color-text: #17241E;
    --color-text-muted: #526158;
    --color-outline: #C9D7CE;
    --color-focus: #075D43;
    --color-success: #00865A;
    --color-error: #B3261E;
    --color-warning: #A76700;
    --color-warning-soft: #FFF7E7;
    --color-warning-text: #654000;
    --size-action-target: 44px;
    --size-control-compact: 32px;
    --size-action-icon: 20px;
    --motion-feedback: 180ms;
    --font-sans: Arial, Helvetica, sans-serif;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-page: 4rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --shadow-surface: 0 0.25rem 1rem rgb(7 93 67 / 8%);
  }
}

@layer base {
  * {
    box-sizing: border-box;
  }

  html {
    min-height: 100%;
    font-family: var(--font-sans);
    font-size: 87.5%;
    color: var(--color-text);
    background: var(--color-surface);
  }

  body {
    min-height: 100svh;
    margin: 0;
  }

  a {
    color: inherit;
  }

  :focus-visible {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.1875rem;
  }
}

@layer components {
  .app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    background: var(--color-surface);
  }

  .access-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    min-height: 100svh;
    padding: var(--space-xl) var(--space-md);
  }

  .access-page__identity {
    display: inline-flex;
  }

  .access-page__logo {
    display: block;
    width: min(14rem, 70vw);
    height: auto;
  }

  .access-page__sign-in {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-action-target);
    padding: 0 var(--space-lg);
    border: 1px solid var(--color-primary-dark);
    border-radius: var(--radius-md);
    background: var(--color-primary-dark);
    color: var(--color-surface-raised);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
  }

  .private-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: min(100% - (2 * var(--space-md)), 42rem);
    margin-inline: auto;
    padding-block: clamp(var(--space-xl), 12vh, 9rem);
  }

  .private-page__status {
    margin: 0 0 var(--space-sm);
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .private-page__title {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: clamp(2rem, 6vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .app-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-height: 3.75rem;
    padding: var(--space-sm) clamp(var(--space-md), 4vw, var(--space-page));
    border-bottom: 1px solid var(--color-outline);
    background: var(--color-surface-raised);
  }

  .app-navigation__identity {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .app-navigation__logo {
    display: block;
    width: clamp(6.5rem, 18vw, 8rem);
    height: auto;
  }

  .app-navigation__links {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--space-sm);
  }

  .app-navigation__link,
  .app-navigation__profile {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-action-target);
    padding: 0 var(--space-sm);
    color: var(--color-text-muted);
    font-weight: 700;
    text-decoration: none;
  }

  .app-navigation__profile {
    margin-left: auto;
    padding-inline: var(--space-md);
    border: 1px solid var(--color-primary-dark);
    border-radius: var(--radius-md);
    color: var(--color-primary-dark);
  }

  .app-navigation__link[aria-current="page"],
  .app-navigation__profile[aria-current="page"] {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
  }

  .profile-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    width: min(100% - (2 * var(--space-md)), 42rem);
    margin-inline: auto;
    padding-block: clamp(var(--space-xl), 10vh, 7rem);
  }

  .profile-page__eyebrow {
    margin: 0 0 var(--space-sm);
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .profile-page__title {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: clamp(2rem, 6vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .profile-details {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: var(--space-xl) 0 0;
    border-top: 1px solid var(--color-outline);
  }

  .profile-details__item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    justify-content: space-between;
    padding-block: var(--space-md);
    border-bottom: 1px solid var(--color-outline);
  }

  .profile-details__label,
  .profile-details__value {
    margin: 0;
  }

  .profile-details__label {
    color: var(--color-text-muted);
    font-weight: 700;
  }

  .profile-details__value {
    text-align: right;
  }

  .profile-actions {
    display: flex;
    width: 100%;
    margin-top: var(--space-lg);
  }

  .profile-actions__sign-out {
    margin: 0;
  }


  .import-page {
    display: flex;
    flex: 1;
    width: min(100% - (2 * var(--space-md)), 72rem);
    margin-inline: auto;
    padding-block: clamp(var(--space-xl), 8vh, var(--space-page));
  }

  .import-page__workspace {
    display: block;
    width: 100%;
  }

  .import-workbench {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .import-workbench__intro {
    max-width: 45rem;
  }

  .import-workbench__intro--review {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: space-between;
    max-width: none;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-outline);
  }

  .import-workbench__eyebrow {
    margin: 0 0 var(--space-sm);
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .import-workbench__title,
  .account-review__heading h2,
  .import-workbench__action h2 {
    margin: 0;
    color: var(--color-primary-dark);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .import-workbench__title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .import-workbench__description {
    max-width: 40rem;
    margin: var(--space-md) 0 0;
    color: var(--color-text-muted);
    font-size: 1.125rem;
    line-height: 1.5;
  }

  .import-workbench__action,
  .account-review,
  .import-summary {
    padding: var(--space-lg);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-surface);
  }

  .import-workbench__action {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    justify-content: space-between;
    align-items: flex-start;
  }

  .import-workbench__action h2,
  .account-review__heading h2 {
    font-size: 1.375rem;
  }

  .import-workbench__action p,
  .account-review__heading p {
    max-width: 34rem;
    margin: var(--space-sm) 0 0;
    color: var(--color-text-muted);
    line-height: 1.5;
  }

  .import-workbench__actions,
  .workbook-upload {
    display: flex;
    flex: 1 1 17rem;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-sm);
  }

  .workbook-upload__label {
    flex-basis: 100%;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 700;
  }

  .workbook-upload__input,
  .crosswalk-decision select {
    min-height: var(--size-action-target);
    padding: var(--space-sm);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
    color: var(--color-text);
    font: inherit;
  }

  .workbook-upload__input {
    flex: 1 1 13rem;
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-action-target);
    padding: 0 var(--space-md);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .copy-action {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--size-action-target);
    height: var(--size-action-target);
    padding: var(--space-sm);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
  }

  .copy-action:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }
  .copy-action[aria-disabled="true"] { cursor: wait; }
  .copy-action svg {
    width: var(--size-action-icon);
    height: var(--size-action-icon);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .copy-action__check { display: none; }
  .copy-action[data-state="copying"] .copy-action__sheets { animation: copy-pending 600ms ease-in-out infinite alternate; }
  .copy-action[data-state="copied"] { color: var(--color-success); }
  .copy-action[data-state="copied"] .copy-action__sheets { display: none; }
  .copy-action[data-state="copied"] .copy-action__check { display: block; animation: copy-confirmed var(--motion-feedback) ease-out; }

  @keyframes copy-pending { to { opacity: 0.45; transform: translateY(-0.125rem); } }
  @keyframes copy-confirmed { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    .copy-action[data-state="copying"] .copy-action__sheets,
    .copy-action[data-state="copied"] .copy-action__check { animation: none; }
  }

  .button--primary {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-dark);
    color: var(--color-surface-raised);
  }

  .button--secondary {
    border-color: var(--color-primary-dark);
    background: var(--color-surface-raised);
    color: var(--color-primary-dark);
  }

  .button--quiet {
    min-height: var(--size-control-compact);
    padding: var(--space-xs) var(--space-sm);
    border-color: var(--color-outline);
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
    color: var(--color-primary-dark);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25;
  }
  .button--quiet:hover:not(:disabled) { border-color: currentColor; background: var(--color-surface); }
  @media (pointer: coarse) {
    .button--quiet { min-height: var(--size-action-target); }
  }
  .button--danger { color: var(--color-error); }

  .button--compact {
    min-height: 2.25rem;
    padding-inline: var(--space-sm);
    font-size: 0.875rem;
  }

  .button:disabled,
  .workbook-upload__input:disabled,
  .crosswalk-decision select:disabled {
    cursor: wait;
    opacity: 0.65;
  }

  .import-workbench__error {
    margin: 0;
    padding: var(--space-md);
    border-left: 0.25rem solid var(--color-error, #B3261E);
    background: #FCE8E6;
    color: #7A1A14;
    font-weight: 700;
  }

  .import-workbench__status {
    max-width: 20rem;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: #FFF9E8;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.4;
  }

  .import-workbench__status--complete {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
  }

  .account-review__heading {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-xl);
    justify-content: space-between;
    align-items: end;
    margin-bottom: var(--space-lg);
  }

  .account-review__table-wrap {
    overflow-x: auto;
  }

  .account-review__table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    text-align: left;
  }

  .account-review__table th,
  .account-review__table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-outline);
    vertical-align: top;
  }

  .account-review__table thead th {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .account-review__table small,
  .account-review__table th span {
    display: block;
  }

  .account-review__table small {
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
    font-weight: 400;
    line-height: 1.4;
  }

  .account-review__amount {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .account-review__row--needs-decision {
    background: #FFF9E8;
  }

  .crosswalk-decision {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .crosswalk-decision select {
    flex: 1 1 12rem;
  }

  .close-review {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-surface);
  }

  .close-review__heading,
  .close-review__totals,
  .close-review__exception {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-xl);
    justify-content: space-between;
  }

  .close-review__heading h2,
  .close-review__exception h3,
  .close-review__exception p {
    margin: 0;
  }

  .close-review__heading p {
    margin: 0;
    color: var(--color-text-muted);
  }

  .close-review__reviewer,
  .close-review__exception label {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: var(--space-xs);
    font-weight: 700;
  }

  .close-review__reviewer input,
  .close-review__exception select,
  .close-review__exception textarea {
    min-height: var(--size-action-target);
    padding: var(--space-sm);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-sm);
    font: inherit;
  }

  .close-review__totals {
    margin: 0;
    padding: var(--space-md) 0;
    border-block: 1px solid var(--color-outline);
  }

  .close-review__totals div {
    flex: 1 1 8rem;
  }

  .close-review__totals dt {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .close-review__totals dd {
    margin: var(--space-xs) 0 0;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  .close-review__exception {
    align-items: flex-end;
    padding-top: var(--space-md);
  }

  .close-review__exception h3,
  .close-review__exception p {
    flex: 1 1 100%;
  }

  .close-review__status {
    margin: 0;
    color: var(--color-primary-dark);
    font-weight: 700;
  }

  .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media (max-width: 40rem) {
    .import-page {
      padding-block: var(--space-xl);
    }

    .import-workbench__action,
    .account-review,
    .close-review {
      padding: var(--space-md);
    }
  }
}

@layer components {
  .profile-account { width: 100%; margin-block-start: var(--space-xl); }
  .profile-account h2 { margin: 0; color: var(--color-primary-dark); font-size: 1.125rem; }
  .profile-account .profile-details { margin-block-start: var(--space-sm); }
  profile-passkeys { display: block; width: 100%; margin-block-start: var(--space-xl); }
  .profile-passkeys__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
  .profile-passkeys__heading h2 { margin: 0; color: var(--color-primary-dark); font-size: 1.125rem; }
  .profile-passkeys__help { color: var(--color-text-muted); margin-block: var(--space-sm); }
  .profile-passkeys__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; border-block-start: 1px solid var(--color-outline); }
  .profile-passkeys__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); border-block-end: 1px solid var(--color-outline); }
  .profile-passkeys__details { display: flex; flex: 1 1 16rem; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
  .profile-passkeys__details small { color: var(--color-text-muted); }
  .profile-passkeys__current { font-size: .875rem; color: var(--color-primary-dark); }
  .profile-passkeys__current:empty { display: none; }
  .profile-passkeys__status { color: var(--color-text-muted); }
  .profile-passkeys__status:empty { display: none; }
  .profile-passkeys__status[data-error="true"] { color: var(--color-error); }
  .profile-passkeys__dialog { width: min(100% - 2 * var(--space-lg), 32rem); max-height: calc(100vh - 2 * var(--space-lg)); padding: var(--space-lg); border: 1px solid var(--color-outline); border-radius: var(--radius-lg); background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-surface); }
  .profile-passkeys__dialog::backdrop { background: rgb(0 0 0 / 35%); }
  .profile-passkeys__form { display: flex; flex-direction: column; gap: var(--space-md); }
  .profile-passkeys__form h2, .profile-passkeys__form p { margin: 0; }
  .profile-passkeys__label { display: flex; flex-direction: column; gap: var(--space-xs); }
  .profile-passkeys__label[hidden] { display: none; }
  .profile-passkeys__label input { width: 100%; min-height: var(--size-action-target); padding: var(--space-sm); border: 1px solid var(--color-outline); border-radius: var(--radius-sm); font: inherit; }
  .profile-passkeys__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); }
}

@layer components {
  account-recovery { display: block; width: 100%; margin-block-start: var(--space-xl); }
  .account-recovery__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
  .account-recovery__heading h2 { margin: 0; font-size: 1.125rem; color: var(--color-primary-dark); }
  .account-recovery__help, .account-recovery__status { color: var(--color-text-muted); }
  .account-recovery__status:empty { display: none; }
  .account-recovery__status[data-error="true"] { color: var(--color-error); }
  .account-recovery__history { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
  .account-recovery__record { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); border-block-end: 1px solid var(--color-outline); }
  .account-recovery__record > div { display: flex; flex: 1 1 14rem; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
  .account-recovery__record span, .account-recovery__record time { color: var(--color-text-muted); font-size: .875rem; }
  .profile-passkeys__label select, .profile-passkeys__label textarea { width: 100%; min-height: var(--size-action-target); padding: var(--space-sm); border: 1px solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-surface-raised); font: inherit; }
}