/* The Longline Labs website shell: header, app switcher, footer, page frame, buttons, the light/dark
   switch. Import after tokens.css. Every class starts with ll- so it can sit beside Tailwind or an
   app's own stylesheet without a clash. The accent appears only where the rule allows it: the stripe
   along the top of the header, the active nav item and link hover, the primary button, and the tile
   behind an app's mark in the switcher. Nothing else is repainted per app. */

.ll-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: var(--ll-body-weight) var(--ll-body-size) / var(--ll-body-line) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* The type scale (tokens/tokens.json "type"). One class per role; a site uses these and sets no sizes of its own. */
.ll-display-xl,
.ll-h1 {
  font: var(--ll-display-xl-weight) var(--ll-display-xl-size) / var(--ll-display-xl-line) var(--font-display);
  letter-spacing: var(--ll-display-xl-tracking);
  font-optical-sizing: auto;
}
.ll-display-md,
.ll-h2 {
  font: var(--ll-display-md-weight) var(--ll-display-md-size) / var(--ll-display-md-line) var(--font-display);
  letter-spacing: var(--ll-display-md-tracking);
  font-optical-sizing: auto;
}
.ll-title {
  font: var(--ll-title-weight) var(--ll-title-size) / var(--ll-title-line) var(--font-sans);
}
.ll-heading {
  font: var(--ll-heading-weight) var(--ll-heading-size) / var(--ll-heading-line) var(--font-sans);
}
.ll-body-lg {
  font: var(--ll-body-lg-weight) var(--ll-body-lg-size) / var(--ll-body-lg-line) var(--font-sans);
}
.ll-body {
  font: var(--ll-body-weight) var(--ll-body-size) / var(--ll-body-line) var(--font-sans);
}
.ll-body-sm {
  font: var(--ll-body-sm-weight) var(--ll-body-sm-size) / var(--ll-body-sm-line) var(--font-sans);
}
.ll-label {
  font: var(--ll-label-weight) var(--ll-label-size) / var(--ll-label-line) var(--font-sans);
  letter-spacing: var(--ll-label-tracking);
  text-transform: uppercase;
}
.ll-numeral {
  font: var(--ll-numeral-weight) var(--ll-numeral-size) / var(--ll-numeral-line) var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ll-muted {
  color: var(--ink-muted);
}

/* The page pattern (tokens/tokens.json "layout"): the hero, then sections 40px apart, the pricing grid. */
.ll-hero {
  display: grid;
  grid-template-columns: var(--ll-hero-columns);
  gap: var(--space-6) var(--ll-hero-gap);
  align-items: center;
  padding-block: var(--ll-hero-pad-top) var(--ll-hero-pad-bottom);
}
.ll-kicker {
  margin: 0 0 var(--space-3);
  color: var(--sea);
  font: 600 var(--ll-body-lg-size) / var(--ll-body-lg-line) var(--font-sans);
}
.ll-h1 {
  margin: 0;
  text-wrap: balance;
}
.ll-lede {
  margin: var(--space-4) 0 0;
  max-width: 34em;
  color: var(--ink-muted);
  font: var(--ll-body-lg-weight) var(--ll-body-lg-size) / var(--ll-body-lg-line) var(--font-sans);
}
.ll-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
}
.ll-note {
  color: var(--ink-muted);
}
.ll-section {
  padding-bottom: var(--ll-section-gap);
  scroll-margin-top: calc(var(--ll-header-height) + var(--space-5));
}
.ll-section-rule {
  border-top: 1px solid var(--hairline);
  padding-top: var(--ll-section-gap);
}
.ll-h2 {
  margin: 0 0 var(--space-4);
}
.ll-h2:has(+ .ll-section-line) {
  margin-bottom: var(--space-1);
}
.ll-section-line {
  margin: 0 0 var(--space-5);
  max-width: 36em;
  color: var(--ink-muted);
  font: var(--ll-body-lg-weight) var(--ll-body-lg-size) / var(--ll-body-lg-line) var(--font-sans);
}
.ll-page-top {
  padding-top: var(--ll-hero-pad-top);
}
.ll-pricing-grid {
  display: grid;
  grid-template-columns: var(--ll-pricing-columns);
  gap: var(--ll-pricing-gap);
}

.ll-body {
  display: flex;
  flex: 1 0 auto;
  align-items: stretch;
}

.ll-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ll-main {
  flex: 1 0 auto;
  outline: none;
}

/* The rail (AppRail): 56px of marks down the left under the header. The aside is the 56px column in the layout; the
   list inside is the visible panel, and on hover it widens over the page to show the names, so nothing shifts. ---- */

.ll-rail {
  position: sticky;
  top: var(--ll-header-height);
  z-index: 30;
  flex: none;
  width: 56px;
  height: calc(100vh - var(--ll-header-height));
  height: calc(100dvh - var(--ll-header-height));
}

.ll-rail-list {
  box-sizing: border-box;
  width: 56px;
  height: 100%;
  margin: 0;
  padding: var(--space-2);
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--space-1);
  list-style: none;
  background: var(--paper-raised);
  border-right: 1px solid var(--hairline);
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .ll-rail-list {
    transition: width 200ms ease-out, box-shadow 200ms ease-out;
  }
}

.ll-rail:hover .ll-rail-list,
.ll-rail:focus-within .ll-rail-list {
  width: 224px;
  box-shadow: var(--shadow-float);
}

.ll-rail-app {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 48px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

a.ll-rail-app:hover {
  background: var(--paper-sunken);
}

.ll-rail-off {
  cursor: default;
}

/* Each app's tile, ringed in that app's accent when it is the current one (the li carries data-app). */
.ll-rail-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
}

.ll-rail-app[aria-current="page"] .ll-rail-tile {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--ll-accent);
}

.ll-rail-text {
  display: grid;
  min-width: 0;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .ll-rail-text {
    transition: opacity 150ms ease-out;
  }
}

.ll-rail:hover .ll-rail-text,
.ll-rail:focus-within .ll-rail-text {
  opacity: 1;
}

.ll-rail-name {
  font: 500 16px / 20px var(--font-display);
  letter-spacing: -0.005em;
}

.ll-rail-off .ll-rail-name {
  color: var(--ink-muted);
}

.ll-rail-soon {
  color: var(--ink-muted);
  font: 600 10.5px / 14px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 899px) {
  .ll-rail {
    display: none;
  }
}

@media print {
  .ll-rail {
    display: none;
  }
}

.ll-container {
  width: 100%;
  max-width: var(--ll-content-width);
  margin-inline: auto;
  padding-inline: var(--ll-gutter);
  box-sizing: border-box;
}



.ll-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ll-skip {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 60;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--ll-accent-fill);
  color: var(--ll-on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-300%);
}
.ll-skip:focus {
  transform: none;
}

.ll-shell :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ll-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .ll-link,
  .ll-btn,
  .ll-switcher-button,
  .ll-menu-button,
  .ll-switcher-app,
  .ll-theme-knob {
    transition:
      background-color 150ms ease-out,
      border-color 150ms ease-out,
      color 150ms ease-out,
      transform 150ms ease-out;
  }
}

/* Header ------------------------------------------------------------------------------------ */

.ll-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  background: var(--paper-raised);
  border-top: 3px solid var(--ll-accent);
  border-bottom: 1px solid var(--hairline);
}

.ll-header-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* The corner above the rail: the Linked LL in its own 56px cell with the rail's edge. Shown only where the rail is. */
.ll-corner {
  display: none;
  flex: none;
  width: 56px;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--hairline);
  color: var(--mark-ink);
}

@media (min-width: 900px) {
  .ll-header-with-rail .ll-corner {
    display: flex;
  }
  .ll-header-with-rail .ll-brand-company,
  .ll-header-with-rail .ll-brand-divider {
    display: none;
  }
}

.ll-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: calc(var(--ll-header-height) - 4px);
}

.ll-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
}

/* The Linked LL in the ink of the approved files: teal by day, cream by night, the same as the app marks' supporting strokes. */
.ll-brand-company {
  color: var(--mark-ink);
}

.ll-brand-divider {
  width: 1px;
  height: 22px;
  background: var(--hairline-strong);
  opacity: 0.6;
  margin-inline: var(--space-1);
}

.ll-mark {
  display: block;
  flex: none;
  color: var(--mark-ink);
}

.ll-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ll-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: var(--space-3);
}

.ll-link {
  color: var(--ink);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.ll-link:hover {
  color: var(--ll-accent-text);
}

.ll-nav-link[aria-current="page"] {
  color: var(--ll-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.ll-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.ll-signin {
  padding: 0 var(--space-1);
}

.ll-closed {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-round);
  background: var(--paper-sunken);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Buttons: the shared shapes. The primary takes the app's accent; nothing else does. */

.ll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ll-btn:hover {
  background: var(--paper-sunken);
}

.ll-btn-primary,
.ll-btn-primary:hover {
  border-color: var(--ll-accent-fill);
  background: var(--ll-accent-fill);
  color: var(--ll-on-accent);
}

.ll-btn-primary:hover {
  filter: brightness(1.08);
}

.ll-btn-secondary {
  background: var(--paper-raised);
}

.ll-btn-lg {
  min-height: 44px;
  padding: 0 20px;
  font-size: 16px;
}

/* The light/dark switch ------------------------------------------------------------------- */

.ll-theme {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: none;
}

.ll-theme-unknown {
  visibility: hidden;
}

.ll-theme-track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-round);
  border: 1px solid var(--hairline-strong);
  background: var(--paper-sunken);
}

.ll-theme-knob {
  position: absolute;
  top: 50%;
  left: 2px;
  display: flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--hairline);
  transform: translateY(-50%);
}

.ll-theme[aria-checked="true"] .ll-theme-knob {
  transform: translate(20px, -50%);
}

/* The app switcher -------------------------------------------------------------------------- */

.ll-switcher {
  position: relative;
  flex: none;
}

.ll-switcher-button,
.ll-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font-size: 14.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.ll-switcher-button::-webkit-details-marker,
.ll-menu-button::-webkit-details-marker {
  display: none;
}

.ll-switcher-button:hover,
.ll-menu-button:hover,
.ll-switcher[open] > .ll-switcher-button,
.ll-menu[open] > .ll-menu-button {
  background: var(--paper-sunken);
  color: var(--ink);
}

.ll-switcher-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: min(360px, calc(100vw - 2 * var(--ll-gutter)));
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  box-shadow: var(--shadow-float);
}

.ll-switcher-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

/* The Longline Labs lockup: the mark and the name in the display face. */
.ll-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  text-decoration: none;
}
.ll-lockup-name {
  font: 500 18px / 24px var(--font-display);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.ll-switcher-line {
  margin: 2px 0 var(--space-3);
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 18px;
}

.ll-switcher-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ll-switcher-app {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
}

a.ll-switcher-app:hover {
  background: var(--paper-sunken);
}

.ll-switcher-app[aria-current="page"] {
  background: var(--paper-sunken);
}

/* The tile behind each app's mark: a hairline box, ringed in that app's accent (the li carries data-app). */
.ll-switcher-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--ll-accent);
}

/* An app that isn't live yet: its mark and accent ring at full strength, the words quieter, nothing to click. */
.ll-switcher-off {
  cursor: default;
}

.ll-switcher-off .ll-switcher-name {
  color: var(--ink-muted);
}

.ll-switcher-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ll-switcher-name {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
}

.ll-switcher-here {
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ll-switcher-desc {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 18px;
}

.ll-switcher-domain {
  color: var(--ll-accent-text);
  font-size: 12.5px;
  line-height: 16px;
}

/* The phone menu ------------------------------------------------------------------------------ */

.ll-menu {
  position: relative;
  display: none;
}

.ll-menu-button {
  width: 36px;
  padding: 0;
  justify-content: center;
}

.ll-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  display: grid;
  gap: 2px;
  min-width: 220px;
  padding: var(--space-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  box-shadow: var(--shadow-float);
}

.ll-menu-link {
  display: block;
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.ll-menu-link:hover {
  background: var(--paper-sunken);
}

.ll-menu-link[aria-current="page"] {
  color: var(--ll-accent-text);
}
.ll-menu-cta {
  margin-top: var(--space-1);
}

/* With the rail showing, the header's switcher would list the same apps twice; it comes back on phones. */
@media (min-width: 900px) {
  .ll-header-with-rail .ll-switcher {
    display: none;
  }
}

@media (max-width: 899px) {
  .ll-nav,
  .ll-signin {
    display: none;
  }
  .ll-menu {
    display: block;
  }
  .ll-switcher-label {
    display: none;
  }
  .ll-switcher-button {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .ll-header-row {
    gap: var(--space-3);
  }
  .ll-actions {
    gap: var(--space-1);
  }
  .ll-brand-divider,
  .ll-brand-mark {
    display: none;
  }
  .ll-wordmark {
    font-size: 20px;
  }
  /* The header's button gives way to the wordmark; the hero repeats it a few lines down, and the menu offers it too. */
  .ll-header-row > .ll-actions > .ll-cta {
    display: none;
  }
}

/* Footer -------------------------------------------------------------------------------------- */

.ll-footer {
  border-top: 1px solid var(--hairline);
  margin-top: auto;
}

.ll-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  /* As tall as a row with the button (36px plus the padding), so the footer is the same height on a site without one. */
  min-height: calc(36px + 2 * var(--space-5));
  padding-block: var(--space-5);
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 20px;
}

.ll-footer-company {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ll-footer-company .ll-lockup {
  color: var(--ink);
}
.ll-footer-company .ll-lockup-name {
  font-size: 15px;
  line-height: 20px;
}

.ll-footer-link {
  color: var(--ink-muted);
  text-decoration: none;
}

.ll-footer-link:hover {
  color: var(--ll-accent-text);
}

.ll-footer-action {
  margin-left: auto;
}

@media print {
  .ll-header,
  .ll-footer,
  .ll-skip {
    display: none;
  }
}

/* The family section (FamilySection): the six-app longline beside the heading, then a card per app. ---------- */

.ll-family-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
  flex-wrap: wrap;
}

.ll-family-head .ll-h2,
.ll-family-head .ll-section-line {
  margin-bottom: 0;
}

.ll-family-head .ll-h2 {
  margin-bottom: var(--space-1);
}

.ll-illustration {
  display: block;
  color: var(--mark-ink);
}

/* The six-app longline at its natural 360px, so each mark is 43px; on a narrow screen it takes the whole column. */
.ll-family-illustration {
  width: min(360px, 100%);
  height: auto;
  flex: none;
}

.ll-family-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* every row as tall as the tallest card, so all six boxes are one size */
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 899px) {
  .ll-family-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .ll-family-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .ll-family-head {
    align-items: flex-start;
  }
}

.ll-family-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}

.ll-family-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: 500 22px / 28px var(--font-display);
  letter-spacing: -0.005em;
}

.ll-family-desc {
  margin: 0;
  color: var(--ink-muted);
}

.ll-family-status {
  margin: 0;
  color: var(--ink-muted);
}

.ll-family-status a {
  color: var(--ll-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}