/* Forge — RHost brand layer.
 *
 * Loaded from custom/templates/custom/header.tmpl, after the theme, so what is
 * set here wins. Layered over the built-in theme rather than replacing it, so
 * upstream theme updates keep working.
 *
 * Two scopes:
 *   1. GLOBAL — typeface, primary colour, navbar and footer. These apply to
 *      every page of the system, including repos, issues and settings.
 *   2. PAGE   — the RHost page STRUCTURE, scoped to the landing, auth,
 *      registration and error pages only. Nothing here touches the app interior.
 *
 * LAYOUT follows RHost's design language; COLOUR does not. The palette is
 * Forge's own #5b8def and the shades derived from it, which is what was in use
 * before this restyle. An earlier revision adopted RHost's navy globally and
 * was reverted on request — so if navy (#0a1357) or their sky (#0284c7)
 * reappears here, it is a regression, not a design choice.
 */

/* ---------------------------------------------------------------- typeface */
/* Space Grotesk, self-hosted. RHost loads it from Google Fonts; this deployment
 * makes no outbound requests, so the files are served from our own origin.
 * It is a VARIABLE font (fvar/gvar/STAT present), so each face declares a
 * weight RANGE. Declaring discrete weights against a variable file pins every
 * weight to the default instance and bold silently renders as regular.
 * OFL-licensed, so redistribution is permitted. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Forge's supported hook: --fonts-regular resolves
     var(--fonts-override, var(--fonts-proportional)), so setting this keeps the
     whole fallback chain (Noto Sans, Liberation Sans, emoji) intact. */
  --fonts-override: "Space Grotesk";

  /* Brand tokens, referenced by the page styles below.
     These are the Forge palette that was in use before the RHost restyle --
     #5b8def and shades derived from it. The LAYOUT follows RHost; the COLOURS
     are deliberately Forge's own. --rh-deep is the darkest step of that same
     scale, used for the surfaces (hero, auth showcase, status pages) that the
     layout needs to contrast against. No RHost navy anywhere. */
  --rh-deep: #172e5e;
  --rh-deep-2: #1e3d7d;
  --rh-accent: #5b8def;
  --rh-emerald: #34d399;
  --rh-radius: 12px;
  --rh-dots: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* ------------------------------------------------- global: primary colour */
/* Restored to the Forge blue that was in use before the restyle. Forge derives
 * buttons, links, focus rings and selection from this scale, so the derived
 * steps are set too or they drift apart. One value serves both colour schemes,
 * as it did before -- #5b8def has enough contrast on light and dark alike. */
:root {
  --color-primary:            #5b8def;
  --color-primary-contrast:   #ffffff;
  --color-primary-dark-1:     #4a7ce0;
  --color-primary-dark-2:     #3a6bd0;
  --color-primary-dark-3:     #2f5cb8;
  --color-primary-dark-4:     #264c9c;
  --color-primary-dark-5:     #1e3d7d;
  --color-primary-dark-6:     #172e5e;
  --color-primary-dark-7:     #101f3f;
  --color-primary-light-1:    #6f9bf2;
  --color-primary-light-2:    #85aaf4;
  --color-primary-light-3:    #9bb9f6;
  --color-primary-light-4:    #b1c8f8;
  --color-primary-light-5:    #c7d7fa;
  --color-primary-light-6:    #dde6fc;
  --color-primary-light-7:    #eef2fe;
  --color-primary-alpha-10:   #5b8def1a;
  --color-primary-alpha-20:   #5b8def33;
  --color-primary-alpha-30:   #5b8def4d;
  --color-primary-alpha-40:   #5b8def66;
  --color-primary-alpha-50:   #5b8def80;
  --color-primary-alpha-60:   #5b8def99;
  --color-primary-alpha-70:   #5b8defb3;
  --color-primary-alpha-80:   #5b8defcc;
  --color-primary-alpha-90:   #5b8defe6;
  --color-primary-hover:      #4a7ce0;
  --color-primary-active:     #3a6bd0;

  /* The home page styles links and glyphs with --color-logo, not
     --color-primary, so the brand colour has to be set here too. */
  --color-logo:               #5b8def;

  /* --color-git (#f05133) is git's own orange and is left alone deliberately:
     it marks git-protocol affordances, not our brand. */
}

/* The navbar and footer are left to the theme. An earlier revision painted them
 * navy; that has been reverted along with the rest of the colour change. */

/* The dot between footer items, used by base/footer_content.tmpl. */
.forge-foot-sep {
  opacity: 0.4;
  margin: 0 2px;
}

/* ======================================================================
   PAGE SCOPE — the RHost page structure, in Forge's colours.
   Everything below is scoped to .forge-page, which only the landing, auth,
   registration and error templates carry. The app interior never sees it.
   ====================================================================== */

/* .page-content adds a top margin to its first child, and .full.height keeps
   64px clear above the footer. Both leave a pale strip against a full-bleed
   navy section, so they are zeroed for these pages only. The custom property
   is set on <body> because it is consumed by .full.height, an ancestor of the
   page wrapper — inheritance is the only way to reach it from here. */
body:has(.forge-page) {
  --page-space-bottom: 0px;
}
.page-content > :first-child.forge-page {
  margin-top: 0;
}

.forge-page {
  background-color: var(--rh-deep);
  background-image: var(--rh-dots);
  background-size: 36px 36px;
  color: rgba(255, 255, 255, 0.72);
  width: 100%;
}
.forge-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 24px 80px;
}
.forge-page a {
  color: #ffffff;
}

/* Eyebrow — RHost's uppercase, wide-tracked section label. */
.forge-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 22px;
}

/* Heading trio: light muted line, bold statement, outlined tail. The outlined
   line uses -webkit-text-stroke, which every current browser supports; where it
   is missing the text falls back to transparent-on-navy and would vanish, so a
   colour is set as well and only overridden inside the @supports block. */
.forge-h1 {
  margin: 0 0 24px;
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.forge-h1 span {
  display: block;
}
.forge-h1 .l1 {
  font-size: clamp(26px, 3.4vw, 44px);
  color: rgba(255, 255, 255, 0.3);
}
.forge-h1 .l2 {
  font-size: clamp(48px, 8vw, 96px);
  color: #ffffff;
}
.forge-h1 .l2 b {
  font-weight: 700;
}
.forge-h1 .l3 {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.28);
}
@supports (-webkit-text-stroke: 1px white) {
  .forge-h1 .l3 {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.25);
  }
}

.forge-lede {
  max-width: 620px;
  margin: 0 0 36px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.45);
}

/* Buttons. Deliberately not .ui.button — that pulls in the theme's own colours
   and would fight the navy surface. */
.forge-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.forge-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--rh-radius);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.forge-btn-primary {
  background: #ffffff;
  color: var(--rh-deep) !important;
}
.forge-btn-primary:hover {
  background: rgba(255, 255, 255, 0.88);
  transform: translateY(-1px);
}
.forge-btn-ghost {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9) !important;
}
.forge-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* Cards — RHost's recipe: faint fill, hairline border, lift plus an emerald
   rule that wipes in from the left on hover. */
.forge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.forge-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--rh-radius);
  padding: 24px 24px 20px;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}
.forge-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-6px);
}
.forge-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--rh-emerald);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}
.forge-card:hover::before {
  transform: scaleX(1);
}
.forge-card-ico {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: var(--rh-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  transition: background-color 0.3s;
}
.forge-card:hover .forge-card-ico {
  background: rgba(255, 255, 255, 0.1);
}
.forge-card h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}
.forge-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
}
.forge-card code {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  color: rgba(255, 255, 255, 0.8);
}

/* Section rhythm */

/* Code block on navy */
.forge-code {
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--rh-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--fonts-monospace);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
}

/* ------------------------------------------------------- CLI downloads */
.forge-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.forge-dl a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: var(--rh-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.forge-dl a:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}
.forge-dl b {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}
.forge-dl span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.forge-note {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.4);
}
.forge-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------ auth and registration */
/* Mirrors RHost's own auth layout (app/auth/layout.tsx + auth-showcase.tsx):
 * the form sits in a 45% column on the left over the page surface, and a navy
 * showcase panel fills the rest on the right, hidden below the md breakpoint.
 * The showcase uses RHost's diagonal hatch, NOT the dot grid the landing hero
 * uses — that difference is theirs and is kept. */
.forge-authpage {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - 64px);
  background: var(--color-body);
}
@media (min-width: 900px) {
  .forge-authpage {
    grid-template-columns: 45% 1fr;
  }
}
.forge-authpage .forge-auth-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 32px;
}
@media (min-width: 1200px) {
  .forge-authpage .forge-auth-col {
    padding: 48px 96px;
  }
}
.forge-auth-inner {
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
}
.forge-auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-weight: 700;
  font-size: 17px;
  color: var(--color-text-dark);
}
.forge-auth-logo img {
  width: 30px;
  height: 30px;
}
.forge-auth-inner > h1 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--rh-deep);
}
/* In dark mode the navy heading disappears into the surface. */
@media (prefers-color-scheme: dark) {
  .forge-auth-inner > h1 { color: var(--color-text-dark); }
}
.forge-auth-sub {
  margin: 0 0 30px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-light-2);
}
.forge-auth-alt {
  margin: 26px 0 0;
  font-size: 14px;
  color: var(--color-text-light-2);
}

/* The form markup is upstream's. Restyled to RHost's field treatment — tiny
 * uppercase labels, generous rounded inputs, full-width primary button —
 * without changing a single field, so authentication logic stays upstream. */
.forge-auth-inner .ui.form .field > label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light-2) !important;
  margin-bottom: 6px !important;
}
/* RHost uses rounded-2xl (16px) fields with generous vertical padding and a
   hairline border; matched here, in Forge's colours. */
.forge-auth-inner .ui.form input[type="text"],
.forge-auth-inner .ui.form input[type="email"],
.forge-auth-inner .ui.form input[type="password"],
.forge-auth-inner .ui.form input[type="number"] {
  width: 100%;
  border-radius: 16px !important;
  padding: 13px 16px !important;
  font-size: 14px;
  border: 1px solid var(--color-secondary) !important;
  background: var(--color-input-background);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.forge-auth-inner .ui.form input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
  outline: none;
}
.forge-auth-inner .ui.form .field {
  margin-bottom: 16px !important;
}
.forge-auth-inner .ui.form .ui.button,
.forge-auth-inner .ui.form button.ui.primary.button {
  width: 100%;
  justify-content: center;
  border-radius: 16px !important;
  padding: 13px 18px !important;
  font-weight: 600;
  font-size: 14px;
}
/* A checkbox row must not stretch like a submit button. */
.forge-auth-inner .ui.form .field .ui.checkbox {
  width: auto;
}
.forge-auth-inner .ui.form .inline.field {
  display: block;
}
/* Upstream wraps each page in its own grid + attached-header card. This page
   already provides the framing, so the duplicate chrome is suppressed here
   rather than the partials being forked further. */
.forge-auth-inner .ui.middle.very.relaxed.page.grid,
.forge-auth-inner .ui.container,
.forge-auth-inner .ui.grid {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.forge-auth-inner .ui.attached.segment {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
/* The inner partials open with their own centred card heading (an h4, not the
   h2/h3 the other auth templates use) — this page already has a heading, so the
   duplicate is suppressed rather than the partial being forked. */
.forge-auth-inner h2.ui.top.attached.header,
.forge-auth-inner h3.ui.top.attached.header,
.forge-auth-inner h4.ui.top.attached.header {
  display: none !important;
}
/* signin_inner/signup_inner close with a second attached segment holding the
   "register instead" link. Keep the content, drop the card chrome. */
.forge-auth-inner .ui.attached.segment.header.top {
  border: none !important;
  background: transparent !important;
  padding: 18px 0 0 !important;
  align-items: flex-start !important;
  font-size: 14px;
}
.forge-auth-inner .divider {
  margin: 18px 0;
}

/* Divider with a centred micro-label, as on RHost's login. */

/* ------------------------------------------------------- auth showcase */
.forge-showcase {
  display: none;
  position: relative;
  overflow: hidden;
  background: var(--rh-deep);
  place-items: center;
}
@media (min-width: 900px) {
  .forge-showcase { display: grid; }
}
.forge-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: repeating-linear-gradient(115deg, #fff 0 2px, transparent 2px 46px);
}
.forge-showcase::after {
  content: "";
  position: absolute;
  inset: 50% 0 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.25), transparent);
}
.forge-showcase-in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  padding: 0 48px;
}
.forge-showcase h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}
.forge-showcase h2 u {
  text-decoration-color: var(--rh-accent);
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
  color: #7fc7f0;
}
.forge-showcase > .forge-showcase-in > p {
  margin: 0 0 30px;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

/* Product preview — RHost puts a small, realistic slice of the product here
   (a DNS record table). The equivalent for a code platform is a pull request. */
.forge-preview {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #ffffff;
  color: #0f172a;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}
.forge-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid #f1f5f9;
}
.forge-preview-head .t {
  font-size: 13px;
  font-weight: 700;
}
.forge-preview-head .n {
  font-family: var(--fonts-monospace);
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px 7px;
}
.forge-preview-head .open {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #16a34a;
  border-radius: 999px;
  padding: 3px 10px;
}
.forge-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid #f8fafc;
  font-size: 12.5px;
}
.forge-preview-row .who { font-weight: 600; }
.forge-preview-row .what { color: #64748b; }
.forge-preview-row .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
}
.forge-preview-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  background: #f8fafc;
}
.forge-preview-foot .pip {
  width: 6px; height: 6px; border-radius: 50%; background: #16a34a;
}

/* ------------------------------------------------------- status pages */
.forge-status .forge-wrap {
  min-height: calc(100vh - 240px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
}
.forge-status-code {
  font-size: clamp(84px, 16vw, 168px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 8px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.22);
}
.forge-status h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.forge-status p {
  margin: 0 0 30px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.45);
}
.forge-status details {
  margin-top: 30px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}
.forge-status details summary {
  cursor: pointer;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------ motion */
@keyframes forge-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.forge-page .fx {
  animation: forge-fade-up 0.6s ease-out both;
}
/* Respect the OS setting — RHost's own stagger is decorative, not meaningful. */
@media (prefers-reduced-motion: reduce) {
  .forge-page .fx,
  .forge-card,
  .forge-btn,
  .forge-dl a {
    animation: none !important;
    transition: none !important;
  }
}

/* ====================================================================
   LANDING — light sections.
   RHost's landing alternates: a dark hero, then white content sections, then
   dark again for pricing and the closing call to action. That rhythm is copied
   here; the colours are Forge's.
   ==================================================================== */
.forge-light {
  background: var(--color-body);
  color: var(--color-text);
  width: 100%;
}
.forge-light-alt {
  background: var(--color-secondary-bg);
}
.forge-light .forge-wrap {
  padding: 88px 24px;
}
/* RHost centres the section heading and its lede, then left-aligns the grid. */
.forge-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.forge-head .forge-eyebrow {
  color: var(--color-text-light-3);
  margin-bottom: 14px;
}
.forge-head h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--color-text-dark);
}
.forge-head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-light-2);
}

/* Cards on a light surface — same recipe as the dark ones, inverted. */
.forge-light .forge-card {
  border-color: var(--color-secondary);
  background: var(--color-body);
}
.forge-light-alt .forge-card {
  background: var(--color-body);
}
.forge-light .forge-card:hover {
  background: var(--color-body);
  border-color: var(--color-primary-light-3);
}
.forge-light .forge-card-ico {
  border-color: var(--color-secondary);
  background: var(--color-primary-light-7);
  color: var(--color-primary);
}
.forge-light .forge-card:hover .forge-card-ico {
  background: var(--color-primary-light-6);
}
.forge-light .forge-card h3 { color: var(--color-text-dark); }
.forge-light .forge-card p  { color: var(--color-text-light-2); }
.forge-light .forge-card code {
  background: var(--color-markup-code-inline);
  color: var(--color-text);
}

/* Numbered "how it works" steps. */
.forge-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.forge-steps li { counter-increment: step; }
.forge-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-primary-contrast);
  background: var(--color-primary);
}
.forge-steps h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-dark);
}
.forge-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-light-2);
}

/* Spotlight — a two-column feature deep-dive with a product slice beside it,
   the shape RHost uses for its zone-file editor. */
.forge-spot {
  display: grid;
  gap: 44px;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .forge-spot { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.forge-spot h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-dark);
}
.forge-spot > div > p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-light-2);
}
.forge-ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.forge-ticks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text-light-1);
}
.forge-ticks svg { flex: none; margin-top: 3px; color: #16a34a; }

/* Closing call to action, on the deep surface. */
.forge-cta { text-align: center; }
.forge-cta .forge-wrap { padding: 80px 24px; }
.forge-cta h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
}
.forge-cta p {
  margin: 0 auto 30px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
}
.forge-cta .forge-btns { justify-content: center; }

/* ====================================================================
   HEADER AND FOOTER — global, every page including signed-in ones.
   Imitates RHost's landing navbar and footer (components/navbar.tsx and the
   footer in app/page.tsx): a tall bordered bar on the page surface with a bold
   wordmark and pill actions, and a multi-column footer. RHost's are white
   because their site is light-only; these follow the theme instead, so the
   dark scheme still works — the proportions and structure are what is copied.
   ==================================================================== */
#navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 72px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--color-body) 95%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-secondary);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}
#navbar .item {
  font-size: 14px;
  font-weight: 500;
}
/* RHost puts the wordmark beside the mark in the header; Forge's navbar
   renders the image alone. The text is added here rather than by forking
   base/head_navbar.tmpl — that template carries the whole signed-in menu, and
   freezing it against upstream to add one word is a bad trade.
   The name is a variable so renaming the product is a one-line change; it
   cannot read AppName because CSS has no access to template data. */
:root { --forge-wordmark: "Forge"; }
#navbar #navbar-logo {
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-dark);
}
#navbar #navbar-logo::after {
  content: var(--forge-wordmark);
}
/* The mobile navbar stacks each item as a full-width row; the wordmark still
   belongs next to the mark, so keep the logo item inline there. */
#navbar #navbar-logo img {
  flex: none;
}
#navbar .navbar-left .item:not(#navbar-logo):hover {
  color: var(--color-primary);
}
/* Register / Sign in become the pill pair RHost puts at the right: an outlined
   secondary next to a filled primary. Matched on href so no template changes
   are needed. */
#navbar .navbar-right a.item[href$="/user/sign_up"],
#navbar .navbar-right a.item[href$="/user/login"] {
  height: 42px;
  padding: 0 20px;
  margin-left: 10px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
#navbar .navbar-right a.item[href$="/user/sign_up"] {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
#navbar .navbar-right a.item[href$="/user/sign_up"]:hover {
  background: var(--color-primary-light-7);
}
#navbar .navbar-right a.item[href$="/user/login"] {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
#navbar .navbar-right a.item[href$="/user/login"]:hover {
  background: var(--color-primary-hover);
}

/* Footer: RHost's four-column block with a rule above the bottom bar. */
.page-footer {
  display: block;
  padding: 56px 20px 24px;
  background: var(--color-body);
  border-top: 1px solid var(--color-secondary);
}
.forge-foot-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 760px) {
  .forge-foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
}
.forge-foot-brand .n {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-dark);
  margin-bottom: 12px;
}
.forge-foot-brand p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-light-2);
  max-width: 320px;
}
.forge-foot-col h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-dark);
}
.forge-foot-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 14px;
}
.forge-foot-col a { color: var(--color-text-light-2); }
.forge-foot-col a:hover { color: var(--color-primary); }
.forge-foot-bottom {
  max-width: 1180px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-light-3);
}
.forge-foot-bottom .right-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ------------------------------------------------- auth: no chrome ------
   The auth pages are the form and the showcase, nothing else. Hiding the
   navbar and footer in CSS keeps base/head.tmpl and base/footer.tmpl
   unforked — they are the two templates every other page depends on. */
body:has(.forge-authpage) #navbar,
body:has(.forge-authpage) .page-footer {
  display: none !important;
}
body:has(.forge-authpage) {
  --page-space-bottom: 0px;
}
.forge-authpage {
  min-height: 100vh;
}

/* ====================================================================
   HEADER ALIGNMENT — one GitHub-style two-row header, everywhere.
   Forge shipped two bars that did not line up: the navbar sat at a flat 20px
   gutter while page content used Fomantic's .ui.container, which is
   max-width:calc(100% - 64px) capped at 1280px and CENTRED. At 1280px wide the
   two were 12px apart; at 1600px they were 140px apart, and the gap grows with
   the window.

   The expression below reproduces that container's geometry exactly, so the
   navbar, the tab strip and the page content share one left edge at every
   width — without touching head_navbar.tmpl or any page template.
   ==================================================================== */
:root {
  /* Fomantic's container is
     width:1280px; max-width:calc(100% - 2*var(--page-margin-x)); margin:auto
     so its left edge is whichever is larger: the responsive page margin, or the
     slack left over once 1280px is centred. --page-margin-x is Forge's own
     variable and shrinks on narrow screens (8px at mobile, 32px at desktop), so
     using it rather than a hardcoded gutter keeps the header aligned at every
     breakpoint instead of only the wide ones. */
  --forge-gutter: max(var(--page-margin-x), calc((100% - 1280px) / 2));
}
#navbar,
.secondary-nav {
  padding-left: var(--forge-gutter);
  padding-right: var(--forge-gutter);
}

/* Row 2 sits flush under row 1 and reads as part of the same header: the
   navbar loses its bottom border and the strip carries it instead. */
#navbar {
  border-bottom: none;
  box-shadow: none;
}
.secondary-nav {
  background: color-mix(in srgb, var(--color-body) 95%, transparent);
  border-bottom: 1px solid var(--color-secondary);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}
/* Left-align the tabs, GitHub-style.
   Two different shapes exist and both have to be handled: on a repository page
   .secondary-nav is a WRAPPER around an <overflow-menu class="ui secondary
   pointing menu">, while on explore and the dashboard .secondary-nav IS the
   menu and its inner .overflow-menu-items carries Forge's own
   .tw-justify-center utility. Targeting only the first shape left the explore
   tabs centred. The utility class has to be overridden by name because it is a
   single-property class of equal specificity that loads after this file. */
.secondary-nav .ui.secondary.pointing.menu,
.secondary-nav .overflow-menu-items,
.secondary-nav .overflow-menu-items.tw-justify-center {
  justify-content: flex-start !important;
  border-bottom: none;
  margin: 0;
}
/* GitHub's tab: icon + label, generous hit area, a 2px accent bar under the
   active one rather than Fomantic's full-width underline. */
.secondary-nav.ui.menu > .overflow-menu-items > .item,
.secondary-nav .ui.secondary.pointing.menu .item {
  padding: 12px 14px !important;
  margin: 0 2px !important;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent !important;
  border-radius: 6px 6px 0 0;
  color: var(--color-text);
}
.secondary-nav.ui.menu > .overflow-menu-items > .item:hover,
.secondary-nav .ui.secondary.pointing.menu .item:hover {
  background: var(--color-hover);
  color: var(--color-text-dark);
}
.secondary-nav.ui.menu > .overflow-menu-items > .item.active,
.secondary-nav .ui.secondary.pointing.menu .item.active {
  font-weight: 600;
  color: var(--color-text-dark);
  border-bottom-color: var(--color-primary) !important;
  background: transparent;
}
/* The count pill GitHub puts after a tab label. */
.secondary-nav .ui.secondary.pointing.menu .item .ui.label,
.secondary-nav .ui.secondary.pointing.menu .item .counter {
  background: var(--color-secondary-alpha-40);
  color: var(--color-text-light-1);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 6px;
}

/* ====================================================================
   PINNED REPOSITORIES — the grid on a profile, in GitHub's shape:
   two columns of bordered cards, name first, then description, then a
   language dot and the counts.
   ==================================================================== */
.forge-pinned {
  margin-bottom: 22px;
}
.forge-pinned > h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--color-text);
}
.forge-pinned ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 820px) {
  .forge-pinned ul { grid-template-columns: 1fr 1fr; }
}
.forge-pinned li {
  border: 1px solid var(--color-secondary);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--color-box-body);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.forge-pinned li .t {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
}
.forge-pinned li .t svg { color: var(--color-text-light-3); }
.forge-pinned li .vis {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-light-2);
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  padding: 1px 8px;
}
/* The name row and its badges share a line, as on GitHub. */
.forge-pinned li .t,
.forge-pinned li .vis { display: inline-flex; }
.forge-pinned li > .t + .vis { margin-top: -26px; margin-left: auto; }
.forge-pinned li p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-light-2);
}
.forge-pinned li .m {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: var(--color-text-light-2);
  margin-top: auto;
}
.forge-pinned li .lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.forge-pinned li .lang i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* ---------------------------------------------- detected CLI download ----
   forge-detect.js marks the build matching the visitor's platform. The
   highlight is a hint, not a gate: every other build stays visible and
   clickable, and none of this exists if the script does not run. */
.forge-dl a.is-detected {
  border-color: var(--rh-accent);
  background: rgba(91, 141, 239, 0.14);
  position: relative;
}
.forge-dl a.is-detected .dl-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rh-accent);
}
.forge-detected {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.55);
}
/* The documentation page carries its own palette, so the same states are
   re-declared there against its light surface. */
.dl a.is-detected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  position: relative;
}
.dl a.is-detected .dl-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------- password reveal ------
   forge-ui.js wraps every password field and appends the toggle. The wrapper
   inherits the field's own layout so Fomantic's sizing is untouched. */
.forge-pw {
  position: relative;
  display: block;
  width: 100%;
}
.forge-pw > input {
  width: 100%;
  padding-right: 42px !important;
}
.forge-pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-light-2);
  cursor: pointer;
}
.forge-pw-toggle:hover {
  background: var(--color-hover);
  color: var(--color-text);
}
.forge-pw-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
/* On the auth pages the field has a 16px radius and more padding. */
.forge-auth-inner .forge-pw > input { padding-right: 46px !important; }

/* ------------------------------------------------ pinned repo picker ---- */
.forge-pinpick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 16px 0;
  max-height: 460px;
  overflow-y: auto;
}
@media (min-width: 820px) {
  .forge-pinpick { grid-template-columns: 1fr 1fr; }
}
.forge-pinpick label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  padding: 11px 13px;
  border: 1px solid var(--color-secondary);
  border-radius: 8px;
  cursor: pointer;
}
.forge-pinpick label:hover { border-color: var(--color-primary-light-3); }
.forge-pinpick label.is-picked {
  border-color: var(--color-primary);
  background: var(--color-primary-alpha-10);
}
/* A disabled box means the cap is reached; make that visible rather than
   leaving the user clicking a box that does nothing. */
.forge-pinpick label:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.forge-pinpick input { margin-top: 3px; }
.forge-pinpick .n { font-weight: 600; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.forge-pinpick .v {
  grid-column: 2; justify-self: start; font-size: 11px; color: var(--color-text-light-2);
  border: 1px solid var(--color-secondary); border-radius: 999px; padding: 0 7px;
}
.forge-pinpick .d { grid-column: 2; font-size: 12.5px; color: var(--color-text-light-2); }
.forge-pinpick-foot {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--color-secondary); padding-top: 14px;
}
.forge-pinpick-foot span { color: var(--color-text-light-2); font-size: 13px; margin-right: auto; }

/* Profile grid header, with the customise link on the right. */
.forge-pinned-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px;
}
.forge-pinned-head h2 { margin: 0; }
.forge-pinned-head a { margin-left: auto; font-size: 13px; }
.forge-pinned-empty {
  margin: 0; padding: 18px; border: 1px dashed var(--color-secondary);
  border-radius: 8px; font-size: 13.5px; color: var(--color-text-light-2);
}

/* ------------------------------------------------- organisation People ---- */
.forge-people-invite { margin-bottom: 14px; }
.forge-people-invite .fields { gap: 12px; }
.forge-people-invite input,
.forge-people-invite select { border-radius: 8px !important; }
.forge-people-hint {
  font-size: 12.5px;
  color: var(--color-text-light-2);
  margin: 6px 0 0;
}
.forge-people-invites h4 { margin: 0 0 10px; }
.forge-people-invites table { margin: 0; }
.forge-role-select {
  border-radius: 8px;
  border: 1px solid var(--color-secondary);
  background: var(--color-input-background);
  color: var(--color-text);
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 600;
}

/* ------------------------------------------------- invite user picker ---- */
.forge-picker {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-body);
  border: 1px solid var(--color-secondary);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
  padding: 4px;
}
.forge-picker-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  font-size: 14px;
  cursor: pointer;
}
.forge-picker-row:hover,
.forge-picker-row.is-active { background: var(--color-hover); }
.forge-picker-row img { border-radius: 50%; flex: none; }
.forge-picker-row b { font-weight: 600; }
.forge-picker-row span { color: var(--color-text-light-2); font-size: 13px; }
.forge-picker-email { border-top: 1px solid var(--color-secondary); border-radius: 0 0 7px 7px; }
.forge-picker-email .ico {
  width: 20px; height: 20px; display: grid; place-items: center; flex: none;
  border-radius: 50%; background: var(--color-primary-light-6);
  color: var(--color-primary); font-weight: 700; font-size: 12px;
}
.forge-picker-empty {
  padding: 10px 12px; font-size: 13px; color: var(--color-text-light-2);
}

/* ------------------------------------------------------------- modal ----
   Replaces window.confirm, which cannot be themed and announces the origin
   ("forge.rhost.rw says") like a browser warning rather than part of the app. */
.forge-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(0 0 0 / 45%);
  opacity: 0;
  transition: opacity 0.16s ease-out;
}
.forge-modal-backdrop.is-open { opacity: 1; }

.forge-modal {
  width: 100%;
  max-width: 420px;
  background: var(--color-body);
  color: var(--color-text);
  border: 1px solid var(--color-secondary);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 38%);
  padding: 22px 22px 18px;
  transform: translateY(6px) scale(0.98);
  transition: transform 0.16s ease-out;
}
.forge-modal-backdrop.is-open .forge-modal { transform: none; }

.forge-modal h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-dark);
}
.forge-modal p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-light-2);
}
.forge-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.forge-modal-btn {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--color-secondary);
  background: var(--color-button);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.forge-modal-btn:hover { background: var(--color-hover); }
.forge-modal-btn.is-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.forge-modal-btn.is-primary:hover { background: var(--color-primary-hover); }
.forge-modal-btn.is-primary.is-danger {
  border-color: var(--color-red);
  background: var(--color-red);
  color: #fff;
}
.forge-modal-btn.is-primary.is-danger:hover { filter: brightness(0.92); }
.forge-modal-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .forge-modal-backdrop, .forge-modal { transition: none; }
}