/* ShareForce AI Hub — shell stylesheet.
   The design direction this implements is recorded as the DIRECTION CONTRACT
   comment at the top of templates/hub/home.html, and the system it produced is
   documented in DESIGN.md at the repo root. Read one of those before reworking
   the gradient signature, the type scale or the tool row. */

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sf-font-body);
  color: var(--sf-ink-2);
  background: var(--sf-bg);
  font-size: var(--sf-t-body);
  line-height: var(--sf-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* --- Browser surfaces ------------------------------------------------
   The parts we didn't draw still belong to the design system: selection,
   caret, focus ring, scrollbar. Left at browser defaults these are the
   loudest tell that a page was assembled rather than built. */
::selection {
  background: rgba(20, 195, 188, .22);
  color: var(--sf-ink);
}
:root { accent-color: var(--sf-teal); }
input, textarea, select { caret-color: var(--sf-teal); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sf-teal-bright);
  outline-offset: 2px;
  border-radius: var(--sf-radius-sm);
}

@supports (scrollbar-color: auto) {
  html { scrollbar-color: #C3D4D8 transparent; scrollbar-width: thin; }
}
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: #C3D4D8;
    border-radius: 99px;
    border: 3px solid var(--sf-bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--sf-grey); }
}

/* Skip link — visible only once it has focus */
.sf-skip {
  position: absolute;
  left: var(--sf-sp-5);
  top: -100px;
  z-index: 400;
  background: var(--sf-surface);
  color: var(--sf-ink);
  font-weight: 600;
  font-size: var(--sf-t-sm);
  padding: 10px 16px;
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-e2);
  transition: top var(--sf-fast) var(--sf-ease);
}
.sf-skip:focus { top: var(--sf-sp-3); }

.sf-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Tabular figures wherever numbers line up */
time, .sf-num { font-variant-numeric: tabular-nums; }

/* =============================================
   LAYOUT
   ============================================= */
.sf-inner {
  width: 100%;
  max-width: var(--sf-measure);
  margin: 0 auto;
  padding-left: var(--sf-sp-7);
  padding-right: var(--sf-sp-7);
}
/* `width: 100%` is load-bearing, not belt-and-braces. `main#main-content` is a flex column, and an
   auto cross-axis margin (the `margin: 0 auto` above) switches OFF flex stretch — so as a direct
   flex child this box was sizing to its *content*, not to the measure. That is why the Claude page's
   body text and cards sat ~90px right of the band above them while Home, whose .sf-inner sits in
   plain block parents, lined up fine. A definite width restores the measure in both contexts. */

/* The brand gradient, promoted from a logo detail to the system's one
   structural signature. It rules the top of the page, marks the active
   nav item, ticks each category and lights the row you're about to open. */
.sf-grad-rule {
  height: 2px;
  background: var(--sf-grad);
  border: 0;
}

/* =============================================
   TOP BAR — shared by every page
   ============================================= */
.sf-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--sf-navy);
  border-bottom: 1px solid var(--sf-navy-rule);
}

.sf-topbar::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--sf-grad);
}

.sf-topbar-inner {
  max-width: var(--sf-measure);
  margin: 0 auto;
  padding: 0 var(--sf-sp-7);
  height: var(--sf-topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sf-sp-6);
}

.sf-topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sf-sp-3);
  flex-shrink: 0;
  border-radius: var(--sf-radius-sm);
}

.sf-topbar-logo { height: 26px; width: auto; display: block; }

.sf-topbar-divider {
  width: 1px;
  height: 18px;
  background: var(--sf-navy-rule);
}

.sf-topbar-label {
  font-family: var(--sf-font-display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sf-on-navy-soft);
  line-height: 1;
  white-space: nowrap;
}

.sf-topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--sf-sp-2);
  margin-left: var(--sf-sp-4);
}

.sf-topbar-nav a {
  position: relative;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--sf-on-navy-dim);
  padding: 6px 10px;
  border-radius: var(--sf-radius-sm);
  transition: color var(--sf-fast) var(--sf-ease), background var(--sf-fast) var(--sf-ease);
  white-space: nowrap;
}

.sf-topbar-nav a:hover { color: var(--sf-on-navy); background: var(--sf-navy-tint); }

/* Active item: the gradient underlines it. */
.sf-topbar-nav a.is-active { color: var(--sf-on-navy); }
.sf-topbar-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: var(--sf-radius-hair);
  background: var(--sf-grad);
}

.sf-topbar-tools {
  display: flex;
  align-items: center;
  gap: var(--sf-sp-3);
  margin-left: auto;
}

.sf-topbar-search {
  display: flex;
  align-items: center;
  gap: var(--sf-sp-2);
  background: var(--sf-navy-tint-2);
  border: 1px solid var(--sf-navy-rule);
  border-radius: 99px;
  padding: 0 var(--sf-sp-4);
  height: 34px;
  width: clamp(180px, 26vw, 300px);
  color: var(--sf-on-navy-dim);
  transition: border-color var(--sf-fast) var(--sf-ease), background var(--sf-fast) var(--sf-ease);
}

.sf-topbar-search:focus-within {
  border-color: rgba(20,195,188,.55);
  background: rgba(20,195,188,.08);
}

.sf-topbar-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--sf-font-body);
  font-size: 13px;
  color: var(--sf-on-navy);
}

.sf-topbar-search input::placeholder { color: var(--sf-on-navy-dim); }

.sf-user-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, #0F968F, #14C3BC);
  color: #04201F;
  font-family: var(--sf-font-display);
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* It links to the account page now (see _shell/topbar.html), so drop the link underline and give it
   the same quiet hover as the bell beside it — it should read as a control, not a badge. */
.sf-user-circle {
  text-decoration: none;
  transition: background var(--sf-fast) var(--sf-ease), border-color var(--sf-fast) var(--sf-ease);
}

.sf-user-circle:hover { background: var(--sf-teal); border-color: var(--sf-teal-bright); }

.sf-user-circle:focus-visible { outline: none; box-shadow: var(--sf-focus); }


/* =============================================
   HOME HERO — navy, ends on the gradient rule
   ============================================= */
.sf-hero {
  position: relative;
  background: var(--sf-navy);
  overflow: hidden;
  isolation: isolate;
  padding-top: var(--sf-sp-7);
  padding-bottom: var(--sf-sp-7);
}

/* Atmosphere: one warm-to-cool wash from the top right, the same two
   brand stops the mark uses. */
.sf-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 150%;
  background:
    radial-gradient(50% 70% at 82% 6%, rgba(20,195,188,.20), transparent 70%),
    radial-gradient(38% 55% at 97% 40%, rgba(254,194,14,.10), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* The mark, cropped off the right edge at a size you can actually read
   as a shape rather than a 4%-opacity ghost. */
.sf-hero-mark {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(300px, 34vw, 480px);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}

.sf-hero-mark svg,
.sf-pagehead-mark svg,
.login-brand-mark svg { width: 100%; height: auto; display: block; }

.sf-hero .sf-inner { position: relative; z-index: 1; }

.sf-hero-title {
  font-family: var(--sf-font-display);
  font-weight: 700;
  font-size: var(--sf-t-display);
  letter-spacing: var(--sf-t-display-ls);
  line-height: 1.1;
  color: var(--sf-on-navy);
  max-width: 24ch;
  text-wrap: balance;
}

.sf-hero-title em {
  font-style: normal;
  color: var(--sf-teal-bright);
}

/* Hero search — an instrument, not a slab. */
.sf-hero-search-wrap { margin-top: var(--sf-sp-5); max-width: 440px; }

.sf-search {
  display: flex;
  align-items: center;
  gap: var(--sf-sp-3);
  background: var(--sf-navy-tint-2);
  border: 1px solid var(--sf-navy-rule);
  border-radius: 99px;
  padding: 0 var(--sf-sp-5);
  height: 44px;
  transition: border-color var(--sf-mid) var(--sf-ease),
              background var(--sf-mid) var(--sf-ease),
              box-shadow var(--sf-mid) var(--sf-ease);
}

.sf-search:focus-within {
  border-color: rgba(20,195,188,.6);
  background: rgba(20,195,188,.09);
  box-shadow: 0 6px 24px -8px rgba(20,195,188,.45);
}

.sf-search-icon { flex-shrink: 0; color: var(--sf-on-navy-dim); display: flex; align-items: center; }

.sf-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--sf-font-body);
  font-size: 14.5px;
  color: var(--sf-on-navy);
}

.sf-search input::placeholder { color: var(--sf-on-navy-dim); }

/* =============================================
   PAGE HEAD — the shorter navy band the inner pages
   (Claude, Updates) wear in place of Home's hero.
   ============================================= */
.sf-pagehead {
  position: relative;
  background: var(--sf-navy);
  overflow: hidden;
  isolation: isolate;
  padding-top: var(--sf-sp-7);
  padding-bottom: var(--sf-sp-6);
}

.sf-pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 88% at 84% 4%, rgba(20,195,188,.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.sf-pagehead-mark {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(190px, 22vw, 280px);
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}

.sf-pagehead .sf-inner { position: relative; z-index: 1; }

/* The page title in that band, whatever each section calls its h1. */
.sf-pagehead h1,
.claude-title,
.update-page-title {
  font-family: var(--sf-font-display);
  font-weight: 700;
  font-size: var(--sf-t-h1);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--sf-on-navy);
  display: flex;
  align-items: center;
  gap: var(--sf-sp-3);
}

/* =============================================
   TOOL DIRECTORY — light working surface
   ============================================= */
.sf-list-zone {
  flex: 1;
  padding-top: var(--sf-sp-8);
  padding-bottom: var(--sf-sp-9);
}

/* The inner pages and the docs shell are the growing child on their own pages. */
main#main-content { display: flex; flex-direction: column; flex: 1; }
.claude-zone, .update-zone, .docs-layout { flex: 1; }

.sf-category + .sf-category { margin-top: var(--sf-sp-8); }

/* Category heading: a real heading with a gradient tick, not mouse-print. */
.sf-category-label {
  display: flex;
  align-items: center;
  gap: var(--sf-sp-3);
  font-family: var(--sf-font-mono);
  font-weight: 500;
  font-size: var(--sf-t-label);
  letter-spacing: var(--sf-t-label-ls);
  text-transform: uppercase;
  color: var(--sf-ink-2);
  padding-bottom: var(--sf-sp-4);
}

.sf-category-label::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: var(--sf-radius-hair);
  background: var(--sf-grad);
  flex-shrink: 0;
}

.sf-category-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sf-line-soft);
}

.sf-tool-list {
  background: var(--sf-surface);
  border: 1px solid var(--sf-line-soft);
  border-radius: var(--sf-radius);
  overflow: hidden;
}

/* --- The row as an object -------------------------------------------
   A launchpad is a directory: it has to read the same with two tools and
   with thirty. So the row stays a row — but a substantial one, with the
   tool's name at display size and a real button for the page's one verb. */
.sf-tool-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sf-sp-5);
  padding: var(--sf-sp-5) var(--sf-sp-6);
  min-height: 92px;
  border-bottom: 1px solid var(--sf-line-soft);
  transition: background var(--sf-mid) var(--sf-ease);
}

.sf-tool-row:last-child { border-bottom: none; }

/* Hover is carried by the ground tint alone. */
.sf-tool-row.is-open:hover,
.sf-tool-row.is-open:focus-within { background: rgba(20,195,188,.05); }

/* Rows you can't launch sit back: no lift, flatter ground. */
.sf-tool-row.is-muted { background: var(--sf-sunk); }

/* Monogram — each tool's own mark, derived from its name so a newly
   registered tool gets an identity without anyone picking an icon. */
.sf-row-body { min-width: 0; }

.sf-row-name-line {
  display: flex;
  align-items: center;
  gap: var(--sf-sp-3);
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.sf-row-name {
  font-family: var(--sf-font-display);
  font-weight: 600;
  font-size: var(--sf-t-row);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--sf-ink);
}

/* Two lines with room to breathe, rather than a one-line ellipsis that
   truncated every real summary the registry holds. */
.sf-row-desc {
  font-size: var(--sf-t-sm);
  color: var(--sf-grey);
  line-height: 1.55;
  max-width: 62ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Status badges --------------------------------------------------- */
.sf-badge-beta,
.sf-badge-planned,
.sf-badge-restricted {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sf-font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
  line-height: 1.5;
  flex-shrink: 0;
}

.sf-badge-beta {
  color: var(--sf-gold-ink);
  background: var(--sf-gold-bg);
  box-shadow: inset 0 0 0 1px rgba(254,194,14,.35);
}

.sf-badge-planned {
  color: var(--sf-grey);
  background: var(--sf-sunk);
  box-shadow: inset 0 0 0 1px var(--sf-line);
}

.sf-badge-restricted {
  color: #A2453D;
  background: var(--sf-restricted-bg);
  box-shadow: inset 0 0 0 1px rgba(200,100,92,.28);
}

/* --- The action ------------------------------------------------------ */
.sf-row-action { flex-shrink: 0; display: flex; align-items: center; }
.sf-cta-form { display: contents; }

/* Open is the page's one saturated fill. Nothing else competes with it. */
.sf-action-open,
button.sf-action-open {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-sp-2);
  font-family: var(--sf-font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: #ffffff;
  background: var(--sf-teal-deep);
  border: none;
  border-radius: 99px;
  padding: 9px 18px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(14,28,34,.14), 0 4px 10px -4px rgba(14,28,34,.16);
  transition: background var(--sf-fast) var(--sf-ease),
              box-shadow var(--sf-mid) var(--sf-ease),
              transform var(--sf-fast) var(--sf-ease);
}

.sf-action-open svg { transition: transform var(--sf-mid) var(--sf-ease); }

.sf-tool-row:hover .sf-action-open,
.sf-action-open:hover {
  background: var(--sf-teal-deeper);
  box-shadow: 0 2px 4px rgba(14,28,34,.16), 0 8px 18px -6px rgba(14,28,34,.22);
}

.sf-tool-row:hover .sf-action-open svg { transform: translateX(3px); }
.sf-action-open:active { transform: translateY(1px); }

.sf-action-notify,
.sf-action-request,
.sf-action-restricted-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-sp-2);
  font-family: var(--sf-font-body);
  font-weight: 500;
  font-size: 13px;
  border-radius: 99px;
  padding: 8px 16px;
  white-space: nowrap;
  background: transparent;
}

.sf-action-notify,
.sf-action-request {
  color: var(--sf-grey);
  box-shadow: inset 0 0 0 1px var(--sf-line);
}

.sf-action-restricted-btn {
  color: #A2453D;
  box-shadow: inset 0 0 0 1px rgba(200,100,92,.35);
  cursor: pointer;
  transition: background var(--sf-fast) var(--sf-ease);
}

.sf-action-restricted-btn:hover { background: var(--sf-restricted-bg); }

/* --- Empty / no-results ---------------------------------------------- */
.sf-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sf-sp-2);
  text-align: center;
  padding: var(--sf-sp-9) var(--sf-sp-6);
  border: 1px dashed var(--sf-line);
  border-radius: var(--sf-radius-lg);
  color: var(--sf-grey);
  font-size: var(--sf-t-sm);
}

.sf-no-results strong {
  font-family: var(--sf-font-display);
  font-weight: 600;
  font-size: var(--sf-t-h3);
  color: var(--sf-ink);
}

/* --- One authored entrance ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .sf-category {
    animation: sf-rise var(--sf-slow) var(--sf-ease) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  @keyframes sf-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* =============================================
   FOOTER
   ============================================= */
.sf-footer {
  border-top: 1px solid var(--sf-line-soft);
  padding: var(--sf-sp-6) 0;
  margin-top: auto;
}

.sf-footer-inner {
  max-width: var(--sf-measure);
  margin: 0 auto;
  padding: 0 var(--sf-sp-7);
  display: flex;
  align-items: center;
  gap: var(--sf-sp-3);
  font-size: var(--sf-t-xs);
  color: var(--sf-muted);
}

.sf-footer-mark { width: 20px; height: auto; opacity: .6; flex-shrink: 0; }
.sf-footer-text { font-weight: 500; color: var(--sf-grey); }

/* =============================================
   SIGN-IN
   ============================================= */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--sf-bg);
}

/* Left: the brand, at full strength. This is the one page where a visitor
   is not yet inside the product, so the identity does the talking. */
.login-brand {
  position: relative;
  background: var(--sf-navy);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* Centred, not space-between. This panel used to hold a headline and a paragraph between the
     lockup and the foot label; with those gone, pushing two small items to opposite ends left a
     large hole down the middle. One centred brand block reads as deliberate instead. */
  justify-content: center;
  align-items: flex-start;
  gap: var(--sf-sp-4);
  padding: var(--sf-sp-9);
  border-right: 2px solid transparent;
}

.login-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 78% 12%, rgba(20,195,188,.22), transparent 70%),
    radial-gradient(45% 45% at 95% 55%, rgba(254,194,14,.12), transparent 72%);
  z-index: 0;
}

.login-brand::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: var(--sf-grad);
  z-index: 2;
}

.login-brand-mark {
  position: absolute;
  right: -110px;
  bottom: -60px;
  width: 420px;
  opacity: .08;
  z-index: 0;
}

.login-brand > *:not(.login-brand-mark) { position: relative; z-index: 1; }

.login-brand-logo { width: 200px; height: auto; display: block; align-self: flex-start; }

.login-brand-foot {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-on-navy-dim);
}

/* Right: the form, and nothing else. */
.login-card-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sf-sp-9) var(--sf-sp-7);
}

.login-card { width: 100%; max-width: 360px; }

.login-card h1 {
  font-family: var(--sf-font-display);
  font-weight: 700;
  font-size: var(--sf-t-h1);
  letter-spacing: -0.025em;
  color: var(--sf-ink);
  margin-bottom: var(--sf-sp-2);
}

.login-card-lede {
  font-size: var(--sf-t-sm);
  color: var(--sf-grey);
  margin-bottom: var(--sf-sp-7);
}

.login-error {
  font-size: var(--sf-t-sm);
  color: #A2453D;
  background: var(--sf-restricted-bg);
  border: 1px solid rgba(200,100,92,.28);
  border-radius: var(--sf-radius);
  padding: var(--sf-sp-3) var(--sf-sp-4);
  margin-bottom: var(--sf-sp-4);
}

.login-card form { display: flex; flex-direction: column; gap: var(--sf-sp-4); }

.login-field { display: flex; flex-direction: column; gap: 6px; }

.login-field label {
  font-size: var(--sf-t-xs);
  font-weight: 500;
  color: var(--sf-ink-2);
  letter-spacing: 0.01em;
}

.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"] {
  width: 100%;
  height: 46px;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 0 var(--sf-sp-4);
  font-family: var(--sf-font-body);
  font-size: 14.5px;
  color: var(--sf-ink);
  background: var(--sf-surface);
  outline: none;
  transition: border-color var(--sf-fast) var(--sf-ease), box-shadow var(--sf-fast) var(--sf-ease);
}

.login-card input:focus {
  border-color: var(--sf-teal-bright);
  box-shadow: var(--sf-focus);
  outline: none;
}

.login-card input::placeholder { color: var(--sf-muted); }

.login-card button[type="submit"] {
  width: 100%;
  height: 46px;
  background: var(--sf-teal-deep);
  color: #ffffff;
  font-family: var(--sf-font-body);
  font-weight: 600;
  font-size: 14.5px;
  border: none;
  border-radius: var(--sf-radius);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(14,28,34,.14), 0 6px 14px -6px rgba(14,28,34,.2);
  transition: background var(--sf-fast) var(--sf-ease), box-shadow var(--sf-mid) var(--sf-ease);
  margin-top: var(--sf-sp-2);
}

.login-card button[type="submit"]:hover {
  background: var(--sf-teal-deeper);
  box-shadow: 0 2px 4px rgba(14,28,34,.16), 0 10px 22px -8px rgba(14,28,34,.24);
}

.login-hint {
  font-size: var(--sf-t-xs);
  color: var(--sf-muted);
  margin-top: var(--sf-sp-6);
  padding-top: var(--sf-sp-5);
  border-top: 1px solid var(--sf-line-soft);
}

.login-hint a {
  color: var(--sf-teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(12,131,125,.4);
  font-weight: 500;
}

.login-hint a:hover { text-decoration-color: currentColor; }

.login-hint a:focus-visible {
  outline: none;
  box-shadow: var(--sf-focus);
  border-radius: var(--sf-radius-hair);
}

/* The old login/set-password band. No template includes it any more — the credential pages moved to
   the shared registration/_auth_page.html shell — but registration/_brand_band.html still exists and
   _brand/lockup.html falls back to .sf-logo-svg when a caller passes no svg_class, so it stays. */
.login-band { background: var(--sf-navy); padding: var(--sf-sp-6) 0; position: relative; overflow: hidden; }
.login-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sf-grad); }
.sf-lockup { display: flex; align-items: center; gap: var(--sf-sp-3); }
.sf-logo-svg { height: 34px; width: auto; }

.sf-lockup-divider { width: 1px; height: 20px; background: var(--sf-navy-rule); }
.sf-ai-hub-label {
  font-family: var(--sf-font-display);
  font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sf-on-navy-soft); line-height: 1;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }
  .login-brand {
    padding: var(--sf-sp-7) var(--sf-sp-6);
    gap: var(--sf-sp-6);
  }
  .login-brand::after { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; }
  .login-brand-foot { display: none; }
  .login-brand-mark { width: 260px; right: -80px; bottom: -50px; }
}

@media (max-width: 760px) {
  .sf-inner, .sf-topbar-inner, .sf-footer-inner {
    padding-left: var(--sf-sp-5);
    padding-right: var(--sf-sp-5);
  }
  .sf-topbar-nav { margin-left: 0; gap: 0; }
  .sf-topbar-nav a { padding: 6px 8px; font-size: 13px; }
  .sf-topbar-search { display: none; }
  .sf-topbar-brand .sf-topbar-divider,
  .sf-topbar-brand .sf-topbar-label { display: none; }
  .sf-hero-mark { width: 260px; right: -90px; opacity: .06; }
}

@media (max-width: 600px) {
  .sf-topbar-inner {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: var(--sf-sp-2);
  }
  .sf-topbar-tools { margin-left: auto; }
  .sf-topbar-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: var(--sf-sp-1);
    margin: 0 calc(var(--sf-sp-5) * -1);
    padding: 0 var(--sf-sp-5) var(--sf-sp-1);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sf-topbar-nav::-webkit-scrollbar { display: none; }
  .sf-topbar-nav a { padding: 8px 10px; }
  .sf-topbar-nav a.is-active::after { bottom: 2px; }

  .sf-hero { padding-top: var(--sf-sp-8); padding-bottom: var(--sf-sp-8); }
  .sf-hero-title { max-width: 100%; }
  .sf-hero-search-wrap { max-width: 100%; }

  .sf-list-zone { padding-top: var(--sf-sp-7); }

  .sf-tool-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: var(--sf-sp-3) var(--sf-sp-4);
    padding: var(--sf-sp-5);
    min-height: 0;
  }
  .sf-row-action { grid-column: 1 / -1; }
  .sf-row-action > *, .sf-action-open, button.sf-action-open { width: 100%; justify-content: center; }
  .sf-row-name { font-size: 20px; }
  .sf-row-desc { -webkit-line-clamp: 3; }
}

@media (max-width: 420px) {
  .sf-topbar-nav a { padding: 6px 6px; font-size: 12.5px; }
}

/* =============================================
   REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
  }
}

/* =============================================
   SHARED PRIMITIVES (used across shells)
   ============================================= */

/* Tooltip term — dotted underline, navy bubble on hover/focus.
   Variants: --below opens under the term (for elements near the top of the
   page); --right anchors the bubble's right edge to the term (for elements
   near the right viewport edge); .sf-term-icon is the ⓘ icon flavour used
   in band titles. */
.sf-term {
  position: relative;
  border-bottom: 1px dotted var(--sf-muted);
  cursor: help;
  outline: none;
}

.sf-term:focus-visible {
  border-radius: var(--sf-radius-hair);
  box-shadow: var(--sf-focus);
}

.sf-term::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%) translateY(2px);
  width: max-content;
  max-width: 250px;
  background: var(--sf-navy);
  color: var(--sf-on-navy);
  border: 1px solid var(--sf-navy-line);
  border-radius: var(--sf-radius-sm);
  padding: 7px 10px;
  font-family: var(--sf-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(14, 28, 34, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 300;
}

.sf-term:hover::after,
.sf-term:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sf-term--below::after {
  bottom: auto;
  top: calc(100% + 7px);
  transform: translateX(-50%) translateY(-2px);
}

.sf-term--right::after {
  left: auto;
  right: 0;
  transform: translateY(-2px);
}

.sf-term--right:hover::after,
.sf-term--right:focus-visible::after {
  transform: translateY(0);
}

.sf-term-icon {
  display: inline-flex;
  align-items: center;
  border-bottom: none;
  color: var(--sf-on-navy-dim);
  transition: color 120ms ease;
}

.sf-term-icon:hover,
.sf-term-icon:focus-visible {
  color: var(--sf-on-navy);
}

.sf-term-icon::after {
  max-width: min(320px, calc(100vw - 48px));
}

@media (max-width: 560px) {
  .sf-term-icon::after {
    left: auto;
    right: -8px;
    max-width: 230px;
    transform: translateY(-2px);
  }

  .sf-term-icon:hover::after,
  .sf-term-icon:focus-visible::after {
    transform: translateY(0);
  }
}

/* Notification bell (Updates feed) — sits beside the user circle in every shell */
.sf-nav-tools {
  display: flex;
  align-items: center;
  gap: var(--sf-sp-3);
}

.sf-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sf-navy-3);
  border: 1px solid var(--sf-navy-line);
  color: var(--sf-on-navy);
  flex-shrink: 0;
  transition: color 120ms ease, border-color 120ms ease;
}

.sf-bell svg {
  width: 17px;
  height: 17px;
}

.sf-bell.sf-term {
  border-bottom: 1px solid var(--sf-navy-line);
  cursor: pointer;
}

.sf-bell:hover {
  color: var(--sf-teal-bright);
  border-color: rgba(20, 195, 188, 0.45);
}

.sf-bell:focus-visible {
  outline: none;
  box-shadow: var(--sf-focus);
}

.sf-bell-active,
.sf-bell-active.sf-term {
  color: var(--sf-teal-bright);
  border-color: rgba(20, 195, 188, 0.45);
}

/* =============================================
   ACCOUNT + PASSWORD PAGES
   The account page, the change-password form and
   the forgotten-password flow all wear the login
   shell (registration/_auth_page.html). These are
   the few extra pieces they need.
   ============================================= */

/* A link that has to read as the primary button ("Go to sign in", "Change password"). Mirrors
   .login-card button[type=submit] exactly, so a link and a button never look like two things. */
.login-cta {
  display: block;
  width: 100%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  background: var(--sf-teal-deep);
  color: #ffffff;
  font-family: var(--sf-font-body);
  font-weight: 600;
  font-size: 14.5px;
  border-radius: var(--sf-radius);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(14,28,34,.14), 0 6px 14px -6px rgba(14,28,34,.2);
  transition: background var(--sf-fast) var(--sf-ease), box-shadow var(--sf-mid) var(--sf-ease);
}

.login-cta:hover {
  background: var(--sf-teal-deeper);
  box-shadow: 0 2px 4px rgba(14,28,34,.16), 0 10px 22px -8px rgba(14,28,34,.24);
}

.login-cta:focus-visible { outline: none; box-shadow: var(--sf-focus); }

/* The 6-digit verification code. Monospace and widely tracked so the digits are countable at a
   glance and a transposed pair is obvious before you submit. */
.login-card input.code-input {
  font-family: var(--sf-font-mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .36em;
  text-indent: .36em;   /* re-centres the text, which the trailing letter-space pushes left */
  text-align: center;
  height: 58px;
}

.login-card input.code-input::placeholder {
  letter-spacing: .36em;
  font-weight: 400;
  color: var(--sf-line);
}

/* "Email / Name" facts on the account page. */
.account-facts {
  margin: 0 0 var(--sf-sp-6);
  padding-bottom: var(--sf-sp-5);
  border-bottom: 1px solid var(--sf-line-soft);
}

.account-facts dt {
  font-size: var(--sf-t-xs);
  font-weight: 500;
  color: var(--sf-muted);
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}

.account-facts dd {
  margin: 0 0 var(--sf-sp-4);
  font-size: 14.5px;
  color: var(--sf-ink);
  word-break: break-all;
}

.account-facts dd:last-child { margin-bottom: 0; }

/* Two links on one hint line — primary action left, quieter one right. */
.login-hint.account-links {
  display: flex;
  justify-content: space-between;
  gap: var(--sf-sp-4);
}

.login-hint.account-links .is-quiet { color: var(--sf-muted); }

.account-signout { margin-top: var(--sf-sp-4); }

/* Sign out: a real action, but never louder than Change password above it. Outlined, not filled.
   The `.login-card` prefix is load-bearing — `.login-card button[type="submit"]` sets the teal CTA
   fill on every submit button in the card, and a bare `.link-button` class lost to it on
   specificity, which is how Sign out ended up as a clipped teal pill. */
.login-card button.login-secondary {
  width: 100%;
  height: 46px;
  background: transparent;
  color: var(--sf-teal-deep);
  font-family: var(--sf-font-body);
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  box-shadow: none;
  cursor: pointer;
  margin-top: 0;
  transition: border-color var(--sf-fast) var(--sf-ease), background var(--sf-fast) var(--sf-ease);
}

.login-card button.login-secondary:hover {
  background: var(--sf-sunk);
  border-color: var(--sf-teal);
  box-shadow: none;
}

.login-card button.login-secondary:focus-visible {
  outline: none;
  box-shadow: var(--sf-focus);
}