/* Warframe landing and route navigation. Keep the tools on their own pages. */
.wf-portal {
  --wf-accent: #d9be8d;
  max-width: 1500px;
  margin-inline: auto;
  padding: clamp(16px, 3vw, 42px);
  min-width: 0;
}
.wf-portal-home { padding-block-end: clamp(36px, 7vw, 96px); }
.wf-portal-hero {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: stretch;
  background: #101823;
  color: #f4f4f0;
}
.wf-portal-lead { padding: clamp(26px, 5vw, 76px); align-self: center; }
.wf-portal-back, .wf-portal-hero a { color: #f3d9aa; text-underline-offset: 4px; }
.wf-portal-back { display: inline-flex; min-height: 44px; align-items: center; }
.wf-portal-kicker, .wf-tool-heading > span {
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .16em;
}
.wf-portal-kicker { color: var(--wf-accent); margin: clamp(18px, 3vw, 42px) 0 .6rem; }
.wf-portal-hero h1, .wf-portal .wf-tool-heading h1 {
  font-family: var(--display), sans-serif;
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: 1.02;
  margin: 0 0 .24em;
  font-size: clamp(2.8rem, 6vw, 6.4rem);
}
.wf-portal-lead > p:last-child { max-width: 30ch; color: #d5dfe5; font-size: clamp(1rem, 1.55vw, 1.24rem); line-height: 1.5; margin: 0; }
.wf-portal-hero figure { position: relative; margin: 0; min-height: 330px; }
.wf-portal-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.wf-portal-hero figcaption { position: absolute; inset: auto 12px 12px auto; padding: 6px 9px; background: #101823; font-size: .76rem; color: #eef0f2; }
.wf-portal-tools, .wf-portal-support { margin-block-start: clamp(20px, 4vw, 52px); }
.wf-portal :is(.wf-portal-tools,.wf-portal-support) h2 { font-family: var(--display),sans-serif; font-size: clamp(1.28rem, 2.5vw, 2rem); margin: 0 0 .6rem; letter-spacing: -.03em; }
.wf-portal-primary, .wf-portal-support > div { display: grid; border-top: 1px solid var(--line); }
.wf-portal-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-portal-support > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-portal-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(10px, 1.3vw, 18px);
  padding: clamp(14px, 2vw, 24px);
  border-inline-end: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  scroll-margin-top: 96px;
}
.wf-portal-link:first-child { padding-inline-start: 0; }
.wf-portal-link:last-child { border-inline-end: 0; }
.wf-portal-link:hover { background: var(--panel); }
.wf-portal-link:hover strong { text-decoration: underline; text-underline-offset: 5px; }
.wf-portal-link svg { width: 25px; height: 25px; color: var(--link); }
.wf-portal-link strong { display: block; font-size: clamp(1rem, 1.55vw, 1.28rem); margin-bottom: .35rem; line-height: 1.18; }
.wf-portal-link span span { display: block; color: var(--muted); font-size: .94rem; line-height: 1.45; }
.wf-portal-link .wf-portal-arrow { justify-self: end; color: var(--link); }
.wf-portal-support .wf-portal-link { grid-template-columns: minmax(0, 1fr) auto; }
.wf-portal :is(a,button,summary):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.wf-portal.wf-tool { color: var(--text); }
.wf-portal-nav {
  display: flex;
  gap: 0 18px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(16px, 3vw, 36px);
}
.wf-portal-nav a { display: flex; min-height: 44px; align-items: center; padding: 4px 2px; color: var(--muted); font-size: .9rem; text-decoration: none; border-bottom: 2px solid transparent; }
.wf-portal-nav a:first-child { color: var(--text); font-weight: 750; margin-inline-end: auto; }
.wf-portal-nav a[aria-current="page"] { color: var(--text); border-color: var(--link); font-weight: 750; }
.wf-portal-nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.wf-portal .wf-tool-heading h1 { font-size: clamp(2.15rem, 5vw, 4.6rem); margin: .16em 0 .24em; }
.wf-tool-heading { margin-block-end: clamp(16px, 3vw, 32px); }
.wf-tool-heading > span { color: var(--link); }
.wf-tool-heading p { margin: 0; max-width: 56ch; color: var(--muted); line-height: 1.48; }
.wf-tool :is(#wfAtlas,#wf-resource-finder,#wf-mod-gallery,#wfLiveTitle,#wfTauboundPlanner,#wfBriefingsTitle) { scroll-margin-top: 96px; }
.wf-tool :is(.wf-legacy,.wf-ecosystem,.wf-notes,.wf-briefings,.wf-field-reference) { margin-block: clamp(18px, 3vw, 36px); }
.wf-tool :is(.wf-legacy,.wf-ecosystem,.wf-notes,.wf-briefings,.wf-worldstate,.wf-field-reference,.wf-farm) { color: #eaf1f5; }
.wf-tool .wf-legacy summary { cursor: pointer; min-height: 44px; align-content: center; }

.wf-tool-loading { display: none; }
@media (max-width: 760px) and (scripting: enabled) {
  .wf-tool-loading {
    display: block;
    min-block-size: 75svh;
    margin: 0;
    padding-block-start: 12px;
    color: var(--muted);
  }
}

.wf-tool #wfAtlas .wa-layout { gap: clamp(14px, 2vw, 32px); }
.wf-tool #wfAtlas .wa-inspector { box-shadow: none; }
.wf-tool #wfAtlas .wa-toolbar { margin-top: 0; }
.wf-tool #wfAtlas .wa-brief { scroll-margin-top: 100px; }
.wf-tool .wf-mod-desk, .wf-tool .wf-resource-desk { max-width: none; margin: 0; border: 0; background: #111b26; border-radius: 0; padding: clamp(14px, 3vw, 36px); }
.wf-tool .wf-mod-toolbar { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(145px, 1fr) auto; gap: 12px 16px; }
.wf-tool .wf-mod-toolbar > label { min-width: 0; }
.wf-mod-filters { grid-column: 1/-1; grid-row: 2; }
.wf-mod-filters > summary { padding: .6rem 0; cursor: pointer; min-height: 44px; }
.wf-mod-filters > div { display: flex; gap: 12px; flex-wrap: wrap; }
.wf-mod-filters label { flex: 1 1 140px; }
.wf-tool .wf-mod-list { gap: 0; }
.wf-tool .wf-mod-choice { border: 0; border-bottom: 1px solid #3b4b59; border-radius: 0; }
.wf-tool .wf-mod-choice[aria-pressed="true"] { box-shadow: inset 2px 0 var(--wf-accent); }
.wf-mod-back { display: none; }
.wf-tool .wf-resource-card { background: transparent; border: 0; border-top: 1px solid #5e6e78; border-radius: 0; box-shadow: none; }
.wf-tool .wf-farm-planner { box-shadow: none; }
.wf-source-gallery > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.wf-source-gallery figure { margin: 0; }
.wf-source-gallery img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }
.wf-source-gallery figcaption { padding-top: 9px; font-size: .88rem; color: var(--muted); }
.wf-guide-notes { padding-block: 20px; border-block: 1px solid var(--line); }

@media (max-width: 750px) {
  .wf-portal-hero { grid-template-columns: 1fr; }
  .wf-portal-hero figure { min-height: 0; aspect-ratio: 2.75; }
  .wf-portal-lead { padding: 13px 18px 18px; }
  .wf-portal-kicker { margin-top: 4px; }
  .wf-portal-primary, .wf-portal-support > div { grid-template-columns: 1fr; }
  .wf-portal-link { padding-inline: 0; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .wf-portal-nav { gap: 0 12px; }
  .wf-portal-nav a:first-child { margin-inline-end: 0; }
  .wf-tool .wf-mod-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .wf-tool .wf-mod-toolbar > label[for="wfModSearch"] { grid-column: 1/-1; }
  .wf-mod-filters { grid-row: auto; }
  .wf-tool .wf-mod-list { gap: 4px; }
  .wf-mod-back { display: inline-flex; align-items: center; min-height: 44px; background: transparent; border: 0; color: #f5dbac; text-decoration: underline; cursor: pointer; padding: 0; }
  .wf-source-gallery > div { grid-template-columns: 1fr; }
}

.wf-tool .wf-mod-toolbar { margin-top: 0; }
.wf-tool #wfAtlas .wa-resource-chips { gap: 6px; }
.wf-tool #wfAtlas .wa-change-world { display: none; }
@media (max-width: 700px) {
  .wf-tool #wfAtlas .wa-map-top { display: none; }
  .wf-tool #wfAtlas .wa-change-world { display: inline-flex; align-items: center; min-height: 44px; color: #f1d5a4; background: transparent; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
}
.wf-tool .wf-resource-controls { margin-top: 0; }
.wf-tool .wf-farm-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; }
.wf-tool .wf-farm-head :is(h3,p) { margin: 0; }
.wf-tool .wf-farm-actions[hidden] { display: none; }
@media (max-width: 640px) {
  .wf-tool .wf-resource-controls { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .wf-tool .wf-resource-controls label { min-width: 0; }
  .wf-tool .wf-resource-controls label:first-child { grid-column: 1/-1; }
  .wf-tool .wf-resource-reset { grid-column: 1/-1; justify-self: end; padding: 0; background: transparent; border: 0; color: #f3d8a6; text-decoration: underline; }
}

.wf-tool #wfAtlas .wa-filter button[aria-pressed="false"] { color: var(--text); border-color: var(--line); }
.wf-tool #wfAtlas .wa-disclaimer { color: var(--muted); }
#wfNavigator.wf-tool #wfAtlas .wa-disclaimer a { color: var(--link) !important; }
.wf-tool .wf-legacy { background: #111a24; }
.wf-tool .wf-event-heading { color: var(--text); }
.wf-tool .wf-notes { color: var(--text); }
.wf-tool .wf-notes a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.wf-tool .wf-clan-feature :is(h2,p) { color: #f2f5f7; }