/* -------------------------------------------------------------------------
   Fonts
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "HKGrotesk";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/HKGrotesk-Light.f8f440218b93.woff2") format("woff2"),
       url("../fonts/HKGrotesk-Light.0c7d127382a5.woff")  format("woff"),
       url("../fonts/HKGrotesk-Light.9c3934e68a50.ttf")   format("truetype");
}
@font-face {
  font-family: "HKGrotesk";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/HKGrotesk-LightItalic.14d9ac0edf5a.woff2") format("woff2"),
       url("../fonts/HKGrotesk-LightItalic.881b8fb82dec.woff")  format("woff"),
       url("../fonts/HKGrotesk-LightItalic.5b2fcd15ef28.ttf")   format("truetype");
}
@font-face {
  font-family: "HKGrotesk";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/HKGrotesk-Regular.6a5c78fe6299.woff2") format("woff2"),
       url("../fonts/HKGrotesk-Regular.614de5dc9007.woff")  format("woff"),
       url("../fonts/HKGrotesk-Regular.7f71f4b36a47.ttf")   format("truetype");
}
@font-face {
  font-family: "HKGrotesk";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/HKGrotesk-Medium.2513d7ebb206.woff2") format("woff2"),
       url("../fonts/HKGrotesk-Medium.478b0260643b.woff")  format("woff"),
       url("../fonts/HKGrotesk-Medium.f9fdcdc64874.ttf")   format("truetype");
}
@font-face {
  font-family: "HKGrotesk";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/HKGrotesk-SemiBold.7cda97db5488.woff2") format("woff2"),
       url("../fonts/HKGrotesk-SemiBold.382373604f6b.woff")  format("woff"),
       url("../fonts/HKGrotesk-SemiBold.33f829c3f801.ttf")   format("truetype");
}
@font-face {
  font-family: "HKGrotesk";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/HKGrotesk-Bold.55a337a6ba3d.woff2") format("woff2"),
       url("../fonts/HKGrotesk-Bold.9267a96b6d61.woff")  format("woff"),
       url("../fonts/HKGrotesk-Bold.a152a6b107b7.ttf")   format("truetype");
}
@font-face {
  font-family: "HKGrotesk";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/HKGrotesk-BoldItalic.bf165eff033a.woff2") format("woff2"),
       url("../fonts/HKGrotesk-BoldItalic.945f6cb37c09.woff")  format("woff"),
       url("../fonts/HKGrotesk-BoldItalic.afb8f239791a.ttf")   format("truetype");
}
@font-face {
  font-family: "GZA";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/gza/gza-seminegra-webfont.9718bb7358fe.woff2") format("woff2"),
       url("../fonts/gza/gza-seminegra-webfont.5287bc94d4bf.woff")  format("woff"),
       url("../fonts/gza/gza-seminegra-webfont.c6465d231507.ttf")   format("truetype");
}

/* -------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Brand — pine family (greens) */
  --pine: #DCEDC9;
  --pine-accent: #C8D5BB;
  --dusty-pine: #C0C2A3;
  --vivid-pine: #869A5D;
  --deep-pine: #676C5B;
  --matcha: #94A073;

  /* Warm accents */
  --dried-needle: #CCAE83;
  --pine-sap: #ECD289;
  --pine-nut: #FFE0B3;
  --redwood: #FE9B7E;

  /* Semantic */
  --cf-danger: #EF613B;
  --cf-warning: #F8D677;
  --cf-success: #26451F;
  --link: #337AB7;
  --link-hover: #74B9F3;

  /* Neutrals */
  --white: #FFF;
  --gray-200: #F6F6F6;
  --gray-300: #EEEEEE;
  --gray-400: #E0E0E0;
  --gray-500: #CECECE;
  --gray-600: #6E6E6E;
  --gray-700: #5C5C5C;
  --gray-900: #3C3A3A;
  --slate: #3E3E3E;
  --header: #2127c5; /* #2127c5; */

  /* Transitions */
  --quick-shift: 125ms;
  --mid-shift: 200ms;
  --slow-shift: 300ms;
  --btn-shift: 250ms;

  /* Layout */
  --container-max: 1140px;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "HKGrotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--slate);
  background: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 { font-weight: 600; color: var(--gray-900); margin: 0 0 .5em; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

hr { border: 0; border-bottom: 1px solid var(--gray-400); }

p { margin: 0 0 1em; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--gray-200);
  padding: 1px 6px;
  border-radius: 0;
}

.muted { color: var(--gray-600); font-size: 14px; }
.lede { font-size: 17px; color: var(--gray-700); max-width: 60ch; }

/* Markdown-rendered description: reset margins so the lede stays visually tight */
.archive-description > :first-child { margin-top: 0; }
.archive-description > :last-child  { margin-bottom: 0; }
.archive-description p,
.archive-description ul,
.archive-description ol,
.archive-description blockquote { margin: 8px 0; }
.archive-description h1,
.archive-description h2,
.archive-description h3,
.archive-description h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--slate);
  margin: 16px 0 4px;
}
.archive-description a { color: var(--link); }
.archive-description a:hover { color: var(--link-hover); }
.archive-description code {
  background: var(--gray-200);
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}
.archive-description pre {
  background: var(--gray-200);
  padding: 10px 12px;
  overflow-x: auto;
}
.archive-description blockquote {
  border-left: 3px solid var(--pine-accent);
  padding-left: 10px;
  color: var(--gray-700);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* -------------------------------------------------------------------------
   Header & footer
   ------------------------------------------------------------------------- */
.site-header {
  background: var(--header);
  color: var(--white);
  padding-top: 10px;
}
.site-header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-header__brand,
.site-header__brand:hover {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  text-decoration: none;
  color: var(--white);
  margin-left: 24px;
}
.site-header__brand * { text-decoration: none; }
.site-header__leaf {
  display: block;
  height: 45px;
  width: auto;
  align-self: flex-end;
}
.site-header__wordmark {
  font-family: "GZA", "HKGrotesk", serif;
  font-weight: 400;
  font-size: 34px;
  color: var(--white);
  margin: 0;
  line-height: 41px;
}
.site-header__subtitle {
  display: flex;
  align-items: center;
  font-family: "GZA", "HKGrotesk", serif;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--white);
  padding-left: 18px;
  transform: translateY(-5px);
}
.site-header__nav {
  margin-left: auto;
  padding-right: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translateY(-5px);
}
.site-header__user { font-size: 14px; font-weight: 600; color: var(--white); }
.site-header__user:hover { color: var(--pine); }
.site-header__logout-form { margin: 0; }
.site-header .btn-link { color: var(--white); }
.site-header .btn-link:hover { color: var(--pine); }

.site-main { flex: 1; padding: 32px 0 64px; }

.site-footer {
  background: var(--gray-200);
  color: var(--gray-700);
  font-size: 14px;
  padding: 24px 0;
  margin-top: auto;
}
.site-footer a { color: var(--link); }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  padding: 7.5px 12px;
  border: 3px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--btn-shift) ease-in-out,
              background-color var(--mid-shift) ease-in-out,
              color var(--mid-shift) ease-in-out;
  line-height: 1.4;
  font-family: inherit;
}
.btn:focus { outline: 2px solid var(--vivid-pine); outline-offset: 1px; }

.btn-primary   { background: var(--pine);     color: var(--slate); }
.btn-primary:hover   { border-color: var(--pine-accent); }

.btn-secondary { background: var(--gray-600); color: var(--white); }
.btn-secondary:hover { border-color: var(--gray-700); }

.btn-danger    { background: var(--cf-danger); color: var(--white); }
.btn-danger:hover { border-color: #c84d2c; }

.btn-dark      { background: var(--slate);   color: var(--white); border-color: var(--gray-700); }

.btn-link {
  background: transparent;
  color: var(--link);
  padding: 4px 0;
  border: none;
  text-decoration: underline;
}
.btn-link:hover { color: var(--link-hover); }

.btn-sm { font-size: 13px; padding: 4px 10px; border-width: 2px; }

/* -------------------------------------------------------------------------
   Links (body content)
   ------------------------------------------------------------------------- */
a {
  color: var(--slate);
  text-decoration: underline;
  transition: color var(--quick-shift) ease-in-out;
}
a:hover { color: var(--vivid-pine); }

/* -------------------------------------------------------------------------
   Messages
   ------------------------------------------------------------------------- */
.messages { list-style: none; padding: 0; margin: 0 0 24px; }
.messages__item {
  padding: 10px 16px;
  background: var(--gray-200);
  margin-bottom: 8px;
}
.messages__item--success { border-left-color: var(--cf-success); background: var(--pine); }
.messages__item--warning { border-left-color: var(--cf-warning); background: #FFF6D7; }
.messages__item--error,
.messages__item--danger  { border-left-color: var(--cf-danger);  background: #FDE3DA; }

/* -------------------------------------------------------------------------
   Cards & layout helpers
   ------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-400);
  padding: 24px;
  margin: 24px 0;
}
.card--narrow { max-width: 440px; margin: 48px auto; }

.plan-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.plan-heading h2 { margin: 0; }
.plan-heading__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-header { margin-bottom: 24px; }

.breadcrumb {
  font-size: 14px;
  margin: 0 0 16px;
  color: var(--gray-600);
}
.breadcrumb__sep {
  margin: 0 6px;
  color: var(--gray-500);
}
.breadcrumb__current {
  color: var(--gray-700);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.actions--end { justify-content: flex-end; }

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--gray-200);
  border: 1px solid var(--gray-400);
  padding: 12px 24px;
  margin: 24px 0;
}

.empty-state {
  padding: 32px;
  background: var(--gray-200);
  color: var(--gray-700);
  text-align: center;
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.form { margin: 0; }
.form-row { margin-bottom: 16px; }
.form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--slate);
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="url"],
.form-row textarea {
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--gray-400);
  border-radius: 0;
  transition: border-color var(--quick-shift) ease-in-out;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--vivid-pine);
}
.form-row__help { display: block; font-size: 13px; color: var(--gray-600); margin-top: 4px; }
.form-row__errors,
.form-errors {
  color: var(--cf-danger);
  font-size: 14px;
  margin: 8px 0;
}
.form-errors ul, .form-row__errors ul { padding-left: 18px; margin: 4px 0; }

/* Secondary link below a form (e.g. "Forgot your password?", "Back to log in") */
.form-aside { margin-top: 20px; font-size: 14px; color: var(--gray-700); }

/* Radio list inside the migration-select form */
ul[id^="id_option"] { list-style: none; padding: 0; }
ul[id^="id_option"] li { padding: 4px 0; }
ul[id^="id_option"] label { display: inline; font-weight: 400; margin-left: 6px; }

/* -------------------------------------------------------------------------
   Dashboard — stats + archive list
   ------------------------------------------------------------------------- */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 32px;
}
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.account-delete-notice {
  margin: 0;
  font-size: 13px;
  color: var(--cf-danger);
  max-width: 36ch;
  text-align: right;
}

/* Account settings page — stacked sections separated by a rule */
.account-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-400);
}
.account-section h2 { margin: 0 0 12px; font-size: 18px; }
.account-section--danger h2 { color: var(--cf-danger); }
.stats__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--gray-200);
  padding: 4px 12px;
  border: 1px solid var(--matcha);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gray-700);
  white-space: nowrap;
}
.stats__num {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
}

.archive-list { list-style: none; padding: 0; margin: 0; }
.archive-list__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-300);
}
.archive-list__item:last-child { border-bottom: none; }
.archive-list__main { flex: 1; min-width: 0; }
.archive-list__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--slate);
  text-decoration: none;
}
.archive-list__name:hover { color: var(--vivid-pine); text-decoration: underline; }
.archive-list__meta {
  font-size: 13px;
  color: var(--gray-600);
  margin-top: 2px;
}
.archive-list__status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Badges (status + option)
   ------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--gray-300);
  color: var(--gray-900);
  white-space: nowrap;
}

/* Status badges */
.badge--complete    { background: var(--pine);      color: var(--cf-success); }
.badge--in_progress { background: var(--pine-sap);  color: var(--gray-900); }
.badge--pending     { background: var(--gray-300);  color: var(--gray-700); }
.badge--failed      { background: #FDE3DA;          color: var(--cf-danger); }
.badge--issues      { background: #FDE3DA;          color: var(--cf-danger); }

/* Option badges (right-of-status, lower-contrast variant) */
.badge--option { background: transparent; border-color: var(--gray-500); color: var(--gray-700); }
.badge--option.badge--private     { border-color: var(--gray-600);    color: var(--gray-600); }
.badge--option.badge--public      { border-color: var(--matcha);     color: var(--vivid-pine); }
.badge--option.badge--self_host   { border-color: var(--dried-needle); color: var(--gray-900); }
.badge--option.badge--download    { border-color: var(--dried-needle); color: var(--gray-900); }
.badge--option.badge--delete      { border-color: var(--cf-danger);  color: var(--cf-danger); }

/* Combined badge: status + option as one segmented pill, divider in the middle */
.badge-combo {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}
.badge-combo .badge {
  border-color: var(--gray-900);
}
.badge-combo .badge + .badge {
  margin-left: -1px;
}
.badge-combo .badge:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.badge-combo .badge:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* -------------------------------------------------------------------------
   Archive detail — metadata grid + option explainer
   ------------------------------------------------------------------------- */
.meta-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 6px;
  margin: 16px 0 32px;
  font-size: 14px;
}
.meta-grid dt { color: var(--gray-600); }
.meta-grid dd { margin: 0; color: var(--gray-900); }

.option-explainer {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 10px;
  margin: 16px 0 32px;
  font-size: 15px;
  padding: 16px 20px;
  background: var(--gray-200);
  border-left: 3px solid var(--matcha);
}
.option-explainer dt { font-weight: 600; color: var(--gray-900); }
.option-explainer dd { margin: 0; color: var(--gray-700); }
.option-explainer .danger { color: var(--cf-danger); }

/* -------------------------------------------------------------------------
   Replay
   ------------------------------------------------------------------------- */
.replay-frame {
  border: 1px solid var(--gray-400);
  margin: 16px 0;
  min-height: 600px;
  display: flex;
}
.replay-frame replay-web-page { flex: 1; min-height: 600px; }

body.replay-page { height: 100vh; }
body.replay-page .site-main {
  display: flex;
  flex-direction: column;
  padding: 24px 0 16px;
  min-height: 0;
}
body.replay-page .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: revert;
}
body.replay-page .replay-frame {
  flex: 1;
  min-height: 320px;
  margin: 12px 0 0;
}
body.replay-page .site-footer { display: none; }

/* -------------------------------------------------------------------------
   Modal (native <dialog>)
   ------------------------------------------------------------------------- */
.modal {
  border: 1px solid var(--gray-400);
  border-radius: 0;
  padding: 0;
  background: var(--white);
  color: var(--slate);
  max-width: 480px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}
.modal__body { padding: 24px; }
.modal__body h2 { margin: 0 0 12px; font-size: 18px; }
.modal__body p { margin: 0 0 12px; }
.modal__body code {
  background: var(--gray-200);
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.modal__body input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--gray-400);
  border-radius: 0;
  margin-bottom: 16px;
  transition: border-color var(--quick-shift) ease-in-out;
}
.modal__body input[type="text"]:focus {
  outline: none;
  border-color: var(--cf-danger);
}
.modal__body .actions { display: flex; gap: 8px; justify-content: flex-end; }

/* -------------------------------------------------------------------------
   Breakpoints
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-header__subtitle { display: none; }
  .archive-list__item { flex-direction: column; align-items: flex-start; }
  .archive-list__status { width: 100%; }
  .meta-grid, .option-explainer { grid-template-columns: 1fr; row-gap: 4px; }
  .meta-grid dt { margin-top: 8px; }
}