/* Shell, copied from the AI Hub's static/css/hub.css (reset, top bar, page head, responsive).
   Keep in step with the Hub so the two sites read as one product. */
/* 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); }
/* =============================================
   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);
}
main#main-content { display: flex; flex-direction: column; flex: 1; }
@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; }

}
@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;
  }
}