/* Secure Vault-inspired dark theme for the escrow-vault staff UI. */

:root {
  --bg: #14171c;
  --panel: #171c22;
  --panel-2: #1d232b;
  --border: #2b323b;
  --text: #d5dbe3;
  --muted: #8a94a3;
  --link: #7ab0f5;
  --accent: #e8934a;      /* Secure Vault's amber repo links */
  --green: #3fb950;
  --green-bg: #12351c;
  --red: #f47067;
  --red-bg: #3d1d1f;
  --blue: #58a6ff;
  --blue-bg: #122a45;
  --yellow: #d4a72c;
  --yellow-bg: #3a2d10;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a.strong, .strong { font-weight: 700; }

h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; margin-top: 1.75rem; }

/* ---- chrome ---- */

.site-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: #171a21;
  border-bottom: 1px solid var(--border);
}

.site-header .brand { color: #f0f3f6; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.site-header .brand:hover { text-decoration: none; color: var(--accent); }

.nav-wrap { margin-left: auto; }
.site-nav { display: flex; gap: 1rem; align-items: center; }
.site-nav a { color: var(--muted); font-size: 0.9rem; }
.site-nav a:hover { color: var(--text); text-decoration: none; }

/* Drawer affordances are inert above the breakpoint. */
.nav-toggle { display: none; }
.nav-scrim { display: none; }

.container { max-width: 1160px; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }

/* Any table wide enough to overflow scrolls inside its own box rather than
   pushing the page sideways. Applied at the wrapper so the table keeps its
   natural column widths instead of being squeezed unreadable. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.flash { border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.9rem; white-space: pre-wrap; margin-bottom: 0.75rem; }
.flash-notice { background: var(--green-bg); border: 1px solid #2ea04366; color: #7ee287; }
.flash-alert { background: var(--red-bg); border: 1px solid #f4706766; color: var(--red); }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.right { text-align: right; }
.slash { color: var(--muted); margin: 0 0.15rem; }

.octicon { vertical-align: text-bottom; flex-shrink: 0; }

/* ---- panels & tables ---- */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.9rem;
}

.panel-body { padding: 0.75rem 1rem; }
.empty-state { padding: 1.5rem; text-align: center; }

table { width: 100%; border-collapse: collapse; }

th, td {
  text-align: left;
  padding: 0.5rem 0.9rem;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}

thead th {
  border-top: none;
  background: var(--panel-2);
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

tbody tr:first-child td { border-top: none; }
tbody tr:hover td { background: #1a2028; }

table:not(.code-lines) { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.panel table { border: none; border-radius: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: #262c36;
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* ---- badges & buttons ---- */

.badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #2b323b;
  color: var(--text);
}

.badge-success { background: var(--green-bg); color: var(--green); }
.badge-syncing, .badge-pending { background: var(--blue-bg); color: var(--blue); }
.badge-auth_failed, .badge-not_found, .badge-error, .badge-failed { background: var(--red-bg); color: var(--red); }
.badge-network_error { background: var(--yellow-bg); color: var(--yellow); }

.label-badge {
  display: inline-block;
  padding: 0 0.45rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  vertical-align: middle;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #21262e;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #2a313b; text-decoration: none; }
.btn-danger { color: var(--red); }
.btn-link { border: none; background: transparent; color: var(--link); }
.btn-primary { background: #238636; border-color: #2ea04366; color: #fff; }
.btn-primary:hover { background: #2ea043; }

.icon-btn { padding: 0.32rem 0.5rem; }
.icon-btn.subtle { border: none; background: transparent; color: var(--muted); }
.icon-btn.copied, .btn.copied { color: var(--green); border-color: var(--green); }

.btn-signout { border: none; background: transparent; color: var(--muted); font-size: 0.9rem; cursor: pointer; padding: 0; }
.btn-signout:hover { color: var(--text); text-decoration: underline; }

.error-box {
  background: var(--red-bg);
  border: 1px solid #f4706755;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--red);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.error-box a { color: var(--red); text-decoration: underline; }

.actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.actions form { display: inline; }

/* ---- dashboard cards ---- */

.cards { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.25rem 0 1.25rem; }
.card { flex: 1 1 200px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 1rem; }
.card .num { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.card .label { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.4rem; }
.attention-link { margin-right: 0.5rem; color: var(--red); }

/* ---- explore bar + repo list ---- */

.explore-bar { margin-bottom: 0.75rem; }
.explore-form { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

.explore-search { display: flex; flex: 1 1 300px; }
.explore-search input {
  flex: 1;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.9rem;
}
.explore-search .btn { border-radius: 0 6px 6px 0; }

.explore-filter { color: var(--muted); font-size: 0.85rem; display: flex; gap: 0.4rem; align-items: center; }
.explore-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.explore-bar .explore-form { flex: 1; }
.explore-new { white-space: nowrap; }

select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #21262e;
  color: var(--text);
  font-size: 0.85rem;
}

.repo-list { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.repo-list .empty-state { border: none; margin: 0; }

.repo-row { display: flex; gap: 0.9rem; padding: 0.8rem 1rem; border-top: 1px solid var(--border); }
.repo-row:first-child { border-top: none; }
.repo-row-icon { color: var(--muted); padding-top: 0.15rem; }
.repo-row-main { flex: 1; min-width: 0; }
.repo-row-title { font-size: 1rem; }
.repo-row-title a { color: var(--accent); }
.repo-row-desc { margin: 0.15rem 0 0.25rem; font-size: 0.9rem; overflow-wrap: anywhere; }
.repo-row-meta { display: flex; gap: 0.75rem; align-items: baseline; white-space: nowrap; font-size: 0.85rem; }

/* ---- repo header, tabs, stats ---- */

.repo-header { margin-bottom: 1rem; }
.repo-title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.15rem; flex-wrap: wrap; }
.repo-title a { color: var(--accent); }
.repo-title-icon { color: var(--muted); }
.repo-mirror-of { margin: 0 0 0.3rem; font-size: 0.85rem; overflow-wrap: anywhere; }
.source-link code { color: var(--link); }
.source-link:hover code { text-decoration: underline; }
.repo-desc { margin: 0.2rem 0 0.4rem; }

.repo-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-top: 0.6rem; flex-wrap: wrap; }
.repo-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
}
.repo-tab:hover { color: var(--text); text-decoration: none; }
.repo-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.tab-count { background: #2b323b; border-radius: 999px; padding: 0 0.45rem; font-size: 0.75rem; }

.repo-stats {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  margin-top: 0.75rem;
  overflow: hidden;
  flex-wrap: wrap;
}
.repo-stat {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  color: var(--muted);
  font-size: 0.88rem;
  border-left: 1px solid var(--border);
}
.repo-stat:first-child { border-left: none; }
.repo-stat b { color: var(--text); }

/* ---- code tab ---- */

.code-toolbar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; }
.branch-form { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); }

.clone-box { display: flex; margin-left: auto; align-items: stretch; max-width: 460px; flex: 1 1 300px; }
.clone-proto {
  display: inline-flex;
  align-items: center;
  padding: 0 0.6rem;
  background: var(--accent);
  color: #14171c;
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 6px 0 0 6px;
}
.clone-box input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-left: none;
  background: var(--panel);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  padding: 0.35rem 0.55rem;
}
.clone-box .btn { border-radius: 0 6px 6px 0; border-left: none; }

.latest-commit {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.latest-commit .commit-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest-commit .ago { white-space: nowrap; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #30506e;
  color: #cbe3ff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sha-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  background: #262c36;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  color: var(--link);
}

.file-table td { padding: 0.42rem 0.9rem; }
.ft-name { width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.ft-name a { color: var(--text); }
.ft-name a:hover { color: var(--link); }
.ft-msg { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 55%; }
.ft-age { text-align: right; white-space: nowrap; font-size: 0.85rem; }
.icon-folder { color: var(--accent); }
.icon-file { color: var(--muted); }

/* ---- commits ---- */

.commits-table .ct-author { white-space: nowrap; display: flex; align-items: center; gap: 0.45rem; border-top: none; }
.commits-table td.ct-msg { max-width: 0; width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commits-table .ct-date { white-space: nowrap; }
.pager { display: flex; gap: 0.5rem; justify-content: center; margin: 1rem 0; }

/* ---- blob ---- */

.breadcrumbs { font-weight: 400; flex-wrap: wrap; }
.head-meta { margin-left: 0.5rem; }
.head-actions { margin-left: auto; display: flex; gap: 0.3rem; }

.code-lines { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
.code-lines td { border-top: none; padding: 0 0.6rem; line-height: 1.5; }
.code-lines .ln {
  text-align: right;
  color: var(--muted);
  user-select: none;
  width: 1%;
  min-width: 3.2em;
  border-right: 1px solid var(--border);
}
.code-lines .lc { white-space: pre; }
.code-lines tr:hover td { background: #1a2028; }
.code-lines tr:target td { background: var(--yellow-bg); }

/* ---- markdown ---- */

.markdown { padding: 1rem 1.5rem; line-height: 1.6; }
.markdown h1, .markdown h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.markdown pre { background: #262c36; border-radius: 6px; padding: 0.8rem 1rem; overflow-x: auto; }
.markdown pre code { background: transparent; padding: 0; }
.markdown img { max-width: 100%; }
.markdown blockquote { border-left: 3px solid var(--border); margin-left: 0; padding-left: 1rem; color: var(--muted); }
.markdown table { width: auto; }
.readme-plain { padding: 0; background: transparent; }

/* ---- kv tables (admin/system) ---- */

.kv-table td:first-child { color: var(--muted); white-space: nowrap; width: 180px; }

/* ---- forms ---- */

.import-form label, .login-form label { font-weight: 600; }

.private-repo {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.25rem 1rem 0.5rem;
  margin: 1rem 0;
}
.private-repo legend { font-weight: 700; padding: 0 0.4rem; color: var(--accent); }
/* Every text-ish input in the app's forms. `tel` and the staff .inline-form
   were missing here, so those fields fell back to the browser's default
   light-on-white chrome inside the dark theme. */
.import-form input[type="text"], .import-form input[type="file"],
.import-form input[type="url"], .import-form input[type="password"],
.import-form input[type="tel"],
.inline-form input[type="text"], .inline-form input[type="tel"],
.login-form input[type="text"], .login-form input[type="password"],
.login-form input[type="tel"] {
  margin-top: 0.25rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  min-width: 320px;
}
.login-form input[type="text"], .login-form input[type="password"],
.login-form input[type="tel"] { width: 100%; min-width: 0; }
.inline-form input[type="text"], .inline-form input[type="tel"] { min-width: 0; }

/* ---- passwordless sign-in ---- */

.login-card {
  max-width: 400px;
  margin: 3.5rem auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.75rem 1.75rem 1.5rem;
}
.login-card h1 { margin: 0 0 0.35rem; }
.login-sub { margin: 0 0 1.4rem; line-height: 1.5; font-size: 0.9rem; }

.field { margin-bottom: 1.1rem; }
.field-label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; }
.field-hint { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }

/* 1rem (16px) keeps iOS Safari from zooming the page in on focus. */
.login-form input.field-input {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
}
.login-form input.field-input:focus,
.login-form input.otp-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #58a6ff33;
}
.field-num { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; direction: ltr; }

/* :user-invalid (not :invalid) so a field the staff hasn't touched yet isn't
   already painted red the moment the page loads. */
.login-form input.field-input:user-invalid { border-color: var(--red); }
.login-form input.field-input:user-valid { border-color: var(--green); }

.login-form input.otp-input {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  direction: ltr;
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* re-centers text that letter-spacing pushes left */
}
.login-form input.otp-input::placeholder { color: #454d59; }

.btn-block {
  width: 100%;
  justify-content: center;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
}

.otp-sent-to {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.7rem 1rem;
  margin-bottom: 1.4rem;
  background: var(--blue-bg);
  border: 1px solid #58a6ff44;
  border-radius: 8px;
}
.otp-mobile {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  direction: ltr;
  color: #b6d8ff;
}

.auth-warning {
  margin-top: 1.1rem;
  padding: 0.6rem 0.85rem;
  background: var(--red-bg);
  border: 1px solid #f4706755;
  border-radius: 8px;
  color: var(--red);
  font-size: 0.85rem;
}
.auth-warning p { margin: 0.15rem 0; }

/* Stacked, not inline: at 375px a "Send a new code (18s)" label plus a second
   link wraps into an unreadable clump, and stacking gives both real tap
   targets. The resend button is full-width so the ticking countdown suffix
   doesn't make it jump around. */
.auth-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.auth-action-form { width: 100%; }
.auth-actions .btn:disabled { color: var(--muted); cursor: default; background: var(--panel-2); }

.otp-meta { margin: 0.75rem 0 0; text-align: center; }

/* The widget is always visible (appearance "always"), but the div is empty
   until the Cloudflare script renders into it — :not(:empty) keeps the margin
   from showing as a gap before that happens, or if the script is blocked. */
.cf-turnstile:not(:empty) { display: flex; justify-content: center; margin-bottom: 1rem; }
.cf-turnstile iframe { max-width: 100%; }

pre.blob {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.45;
}

/* ---- narrow screens ----
   Single breakpoint: above it the layout is the desktop one, below it the nav
   becomes an off-canvas drawer and every horizontal run (tables, toolbars,
   tab strips) either wraps, stacks, or scrolls inside its own box. The page
   body itself must never scroll sideways. */

@media (max-width: 800px) {
  .container { padding: 1rem 0.9rem 2.5rem; }
  h1 { font-size: 1.2rem; }
  h2 { font-size: 1rem; }

  /* --- nav drawer --- */
  .site-header { padding: 0.55rem 0.9rem; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #21262e;
    color: var(--text);
    cursor: pointer;
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 30;
  }
  .nav-wrap.open .nav-scrim { opacity: 1; pointer-events: auto; }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(76vw, 270px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 1rem 1.5rem;
    background: var(--panel);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.18s ease;
    overflow-y: auto;
    z-index: 40;
  }
  .nav-wrap.open .site-nav { transform: none; }

  .site-nav a,
  .site-nav .btn-signout {
    display: block;
    padding: 0.85rem 0.25rem;
    font-size: 0.95rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
  }
  .site-nav form { width: 100%; }
  .site-nav .btn-signout { width: 100%; }

  /* Drawer is fixed-position; freezing the body stops the page scrolling
     underneath it while it's open. */
  body.nav-open { overflow: hidden; }

  /* --- tables --- */
  /* Below this width the columns collapse into unreadable slivers, so scroll
     the wrapper instead. Code and 2-column key/value tables are exempt: they
     get their own treatment below. */
  .table-scroll > table:not(.code-lines):not(.kv-table) { min-width: 620px; }

  /* Key/value tables stack: a fixed 180px label column would eat half the
     screen and leave the value a few characters wide. */
  .kv-table tr { display: block; border-top: 1px solid var(--border); }
  .kv-table tr:first-child { border-top: none; }
  .kv-table td { display: block; width: auto; border-top: none; padding: 0.15rem 0.9rem; }
  .kv-table td:first-child { width: auto; padding-top: 0.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
  .kv-table td:last-child { padding-bottom: 0.55rem; overflow-wrap: anywhere; }

  /* --- forms --- */
  /* These carried a 320px min-width, which alone overflows a 375px viewport
     once container padding is counted. */
  .import-form input[type="text"], .import-form input[type="file"],
  .import-form input[type="url"], .import-form input[type="password"],
  .inline-form input[type="text"], .inline-form input[type="tel"] {
    width: 100%;
    min-width: 0;
  }
  .inline-form { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }

  .login-card { margin: 1.5rem auto; padding: 1.4rem 1.25rem 1.25rem; }

  /* --- repo chrome --- */
  /* These toolbars stack here. Their children carry `flex: 1 1 <n>px` bases
     sized for a row, and in a column container that basis becomes a HEIGHT —
     which stretched the clone box into a ~300px-tall block. Reset to auto. */
  .code-toolbar { flex-direction: column; align-items: stretch; }
  .clone-box { margin-left: 0; max-width: none; flex: 0 0 auto; }
  .explore-bar .explore-form { flex: 0 0 auto; }

  .repo-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .repo-tab { white-space: nowrap; }

  .repo-stats { flex-wrap: wrap; }
  .repo-stat { flex: 1 1 50%; border-left: none; }

  .breadcrumbs { overflow-wrap: anywhere; }
  .head-actions { margin-left: 0; }

  /* --- dashboard --- */
  .card { flex: 1 1 100%; }

  .repo-row { flex-wrap: wrap; }
  .repo-row-meta { width: 100%; padding-left: 2.15rem; }

  .explore-bar { flex-direction: column; align-items: stretch; }
  .explore-new { justify-content: center; }

  /* --- long values --- */
  .markdown { padding: 0.75rem 1rem; }
  .markdown pre { font-size: 0.8rem; }
  code { overflow-wrap: anywhere; }
}