/* Outbound-link chrome. Tokens come from site.css / active theme overlay. */
html.links-html,
body.links-body {
  height:100%;
  overflow:hidden
}
body.links-body {
  background:var(--paper);
  color:var(--ink);
  margin:0
}
body.links-body form {
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.links-chrome {
  flex:0 0 auto;
  position:relative;
  z-index:2;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 var(--line)
}
.links-top,
.links-toolbar {
  width:min(1240px,calc(100% - 32px));
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:16px
}
.links-top {
  padding:12px 0 10px;
  justify-content:space-between
}
.links-brand {
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  color:var(--teal)
}
.links-brand:hover {
  color:var(--teal-hover)
}
.links-top .theme-switch {
  flex:0 0 auto
}
.links-brand .brand-symbol {
  font-size:22px;
  line-height:1;
  color:var(--accent)
}
.links-brand b {
  display:block;
  font-size:18px;
  line-height:1.2
}
.links-brand small {
  display:block;
  font-size:11px;
  color:var(--muted);
  font-weight:400;
  margin-top:2px
}
.links-title-block {
  flex:1 1 auto;
  min-width:0;
  text-align:right
}
.links-title-block .eyebrow {
  display:block;
  margin-bottom:2px
}
.links-title-block h1 {
  font-size:16px;
  font-weight:700;
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.links-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:4px;
  color:var(--muted);
  font-size:12px
}
.links-host {
  direction:ltr;
  unicode-bidi:isolate
}
.links-open {
  flex:0 0 auto;
  gap:8px;
  white-space:nowrap
}
.links-toolbar {
  padding:0 0 12px;
  justify-content:space-between;
  flex-wrap:wrap;
  border-top:1px solid var(--line)
}
.links-nav,
.links-share {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding-top:10px
}
.links-share {
  color:var(--muted);
  font-size:12px
}
.links-share > span {
  margin-inline-end:4px
}
.links-chip,
.links-share a,
.links-share button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--button-border);
  border-radius:6px;
  font:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  background:var(--surface)
}
.links-chip:hover,
.links-share a:hover,
.links-share button:hover {
  color:var(--teal);
  border-color:var(--teal)
}
.links-chip.is-accent {
  background:var(--teal);
  color:var(--on-teal);
  border-color:var(--teal)
}
.links-chip.is-accent:hover {
  background:var(--teal-hover);
  color:var(--on-teal);
  border-color:var(--teal-hover)
}
.links-share button {
  cursor:pointer
}
body.links-body .links-stage {
  flex:1 1 auto;
  min-height:0;
  position:relative;
  z-index:0;
  background:var(--surface-3)
}
.links-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:var(--surface)
}
.links-fallback {
  width:min(640px,calc(100% - 40px));
  margin:48px auto;
  padding:28px 24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  text-align:right
}
.links-fallback h2 {
  font-size:20px;
  margin-bottom:10px
}
.links-fallback p {
  color:var(--muted);
  font-size:14px;
  margin-bottom:18px
}
.links-fallback .solid-button {
  gap:10px
}

@media (max-width:800px) {
  .links-top {
    flex-wrap:wrap;
    align-items:flex-start
  }
  .links-title-block {
    order:3;
    width:100%
  }
  .links-open {
    margin-inline-start:auto
  }
  .links-brand small {
    display:none
  }
  .links-title-block h1 {
    font-size:15px
  }
}

@media (max-width:560px) {
  .links-top,
  .links-toolbar {
    width:calc(100% - 24px)
  }
  .links-open {
    padding:8px 12px;
    min-height:40px;
    font-size:12px
  }
  .links-share > span {
    width:100%
  }
}